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网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


就 目前 市 场 上 “Web 前 端 开发 “移动 互联 网 开发 网 页 游戏 开发 "和 “网 页 美工 "等 
有 关 互 联网 类 的 岗位 而 言 ,其 职位 要 求 或 多 或 少 地 包含 “熟练 使 用 Dreamweaver”“ 精 通 
DIV 十 CSS”“ 熟 悉 主 流 Web 浏览 器 的 开发 模式 和 特性 ”"“ 能 够 手写 页 面 代码 ”"“ 熟 悉 
HTML 5 和 CSS 3 者 优先 录用 ”等 关键 词 。 在 紧密 结合 市 场 需求 的 前 提 下 ,本 书 延续 已 
经 成 熟 的 DIV 十 CSS 网 页 制作 模式 ,将 HTML 5 和 CSS 3 的 基础 知识 融入 Dreamweaver 
CS6 软件 的 讲解 之 中 ,注重 HTML 5 特性 与 思维 模式 的 迁移 。 

全 书 共 分 为 12 章 ,根据 知识 的 难 易 程 度 和 学 习 者 的 学 习习 惯 ,在 Dreamweaver CS6 
软件 的 讲解 中 对 HTML 5 和 CSS 3 知识 进行 无 颖 衔接 ,使 每 章 有 理论 ,堂堂 有 案例 , 课 后 
有 实 训 。 本 书 主要 内 容 包括 : 网 页 设计 基础 ,HTML 语言 基础 ,Dreamweaver CS6 基础 
与 CSS 入 门 ,文本 与 图 像 ,浮动 ,定位 和 列表 ,表格 与 表单 ,框架 .模板 与 CSS 3 新 增 布 局 ， 
行为 与 Spry 构件 ,CSS 进 阶 提高 ,站 点 测试 、 上 传 与 维护 ,综合 案例 解析 一 一 电子 商务 网 
站 和 实 训 指导 。 

本 书 具 有 以 下 特色 。 

避 微 课 视 频 : 所 有 知识 点 均 包 含 在 许多 短小 的 视频 中 ,不 受 时 空 限制 ,读者 可 随时 随 

地 预习 或 复习 。 

芯 贴近 岗 位 : 本 书 所 涉及 的 内 容 均 是 互联 网 类 岗位 中 必 不 可 少 的 知识 ,通过 学 习 读 
者 能 够 达到 岗位 需求 的 基本 要 求 。 

必 精 选 案例 : 每 章 包含 “过 程 指导 ”环节 ,通过 精心 挑选 的 实战 案例 ,以 及 详 略 得 当 的 
过 程 指导 ,读者 在 学 习 过 程 中 能 够 直观 清晰 地 看 到 操作 过 程 和 效果 。 

名 自主 任务 : 每 章 包含 “自主 任务 ”环节 , 留 出 时 间 让 读者 参照 “过程 指导 ”进行 实 训 
练习 。 

习 配 套 资源 : 本 书 提供 全 套 源 文件 、 微 课 视频 、PPT 课件 .课时 授课 计划 和 学 期 
授课 计划 ,读者 可 以 从 清华 大 学 出 版 社 网 站 (http://www. tup. tsinghua. edu. 
cn) 下 载 。 

本 书 既 可 作为 应 用 型 本 科 、 高 职高 专 以 及 各 层次 院 校 计算 机 相关 专业 的 教材 ,也 

可 供 希 望 从 事 网 页 设计 的 读者 自学 使 用 ,还 可 作为 IT 类 培训 机 构 的 网 页 设计 培训 
教程 。 

本 书 的 参考 学 时 为 60 学 时 ,为 了 方便 教师 教学 ,这 里 提供 各 章节 任务 的 学 时 分 配 , 详 
见 下 表 。 
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学 时 分 配 


序号 章节 内 容 
理论 实践 小 计 
第 1 章 网 页 设计 基础 1 1 
第 2 章 HTML 语言 基础 » 4 6 
第 3 章 Dreamweaver CS6 基础 与 CSS 入 门 4 6 
第 4 章 文本 与 图 像 2 4 6 
第 5 章 浮动 .定位 和 列表 2 4 6 
第 6 章 表格 与 表单 多 2 4 
第 7 章 框架 .模板 与 CSS 3 新 增 布局 4 4 8 
第 8 章 行为 与 Spry 构件 1 2 
第 9 章 CSS 进 阶 提高 2 4 6 
第 10 章 站 点 测试 上传 与 维护 时 1 2 
第 11 章 综合 案例 解析 一 一 电子 商务 网 站 1 3 4 
第 12 章 实 训 指导 0.5 5 8 
合计 60 


本 书 由 吴 丰 编写 ,在 编写 过 程 中 ,许多 同人 给 予 了 很 大 的 帮助 和 支持 ,提出 了 许多 中 
肯 的 建议 ,在 此 表示 感谢 。 同 时 ,还 要 感谢 清华 大 学 出 版 社 的 所 有 编审 人 员 为 本 书 的 出 版 
所 付出 的 辛勤 劳动 。 最 后 ,还 要 感谢 家 人 的 理解 和 支持 。 本 书 的 成 功 出 版 是 大 家 共同 努 
力 的 结果 ,谢谢 你 们 ! 

另外 ,由 于 时 间 仓 促 , 水 平 有 限 , 书 中 有 不 足 之 处 , 敬 请 广大 读者 批评 ,指正 ,以 便 修订 
时 使 之 更 加 完善 ,诚心 希望 与 读者 共同 交流 ,共同 成 长 。 
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网 页 设计 基础 


【本 章 导 读 】 

对 于 当前 主流 的 “网 站 开发 Web 前 端 工 程 师 ”等 工作 岗位 来 讲 ,精通 HTML、CSS， 
熟悉 网 页 页 面 架构 和 布局 已 经 成 为 任职 资格 的 必 备 条 件 。 本 章 在 讲解 最 基本 的 网 页 设计 
基础 知识 以 外 ,着 重 从 思想 方面 引导 读者 理解 网 页 制作 的 相关 理念 。 

【学 习 目 标 】 

十 了解 Web 标准 的 相关 知识 ; 

如 充分 理解 “结构 与 表现 相 分 离 ” 的 重要 思想 ,以 及 HTML 5 的 必要 性 ; 

名 了 解 有 关 网 页 制作 的 基本 知识 ,熟知 网 站 建设 的 基本 流程 。 


1.1 Web 时 代 的 重要 理念 


随 着 HTML 5 的 迅猛 发 展 ,各 大 浏览 器 开发 商 对 HTML 5 的 支持 越 来 越 完善 。 从 
前 端 开发 技术 角度 来 看 ,互联 网 的 发 展 经 历 了 以 HTML 和 CSS 为 主 的 Web 1.0 时 代 , 以 
Ajax 应 用 为 主 的 Web 2.0 时 代 , 正 在 迈进 以 HTML 5 为 主 的 轨 新 时 代 。 

在 此 发 展 趋势 下 ,学 习 HTML 5 以 及 CSS 3 技术 无 疑 成 为 Web 前 端 开发 者 的 重要 
任务 ,本 节 首 先 从 思想 方面 引导 读者 理解 网 页 制作 的 相关 理念 。 


1.1.1 Web 标准 简 介 


Web 标准 (Web Standards) 即 网 站 标准 . 它 并 非 是 某 一 个 标准 ,而 是 一 系列 标准 的 集 
合 。 这 些 标准 是 由 W3C 和 ECMA 共同 制定 


的 ,用 来 创建 和 规范 网 页 的 基本 内 容 。 按照 这 ， 国 轩 表现 行为 

些 标准 制作 的 网 页 ,能够 体现 * 表 现 与 结构 相 分 “ 国 N ee 

离 * 这 一 核心 理念 。 
具体 地 讲 , Web 标准 主要 由 三 方面 的 标准 

构成 ,结构 化 标准 语言 (主要 包括 HTML、 名 

XHTML 和 XML)、 表 现 标 准 语言 (主要 包括 

CSS)、 行 为 标准 (主要 包括 DOM 和 


ECMAScript 等 ) ,这 些 标准 共同 组 合 起 来 称 为 


Web 标准 ,如 图 1-1 所 示 。 DE We 
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1. 结构 标准 语言 

(1) HTML 4.01 

HTML(HyperText Markup Language, 超 文本 置 标语 言 ) 是 构成 网 页 文档 的 主要 语 
言 。HTML 文档 包含 了 很 多 标签 ,其 目的 是 为 网 页 文档 增加 结构 信息 ,告诉 浏览 器 如 何 
显示 页 面 。 浏 览 器 在 解析 这 些 包含 标题 段落 等 标签 的 文档 后 ,用 相应 的 表现 形式 即 可 将 
页 面 展现 出 来 。 

(2) XHTML 1.0 

XHTML(The eXtensible HyperText Markup Language, 可 扩展 超 文 本 置 标语 言 ) 实 
际 上 是 将 HTML 根据 XML 规范 进行 重新 定义 , 它 的 标签 与 HTML 4. 01 一 致 ,而 格式 
却 严格 遵循 XML 规范 。 

XHTML 有 三 种 DTD 定义 : 严格 的 (Strict)、 过渡 的 (Transitional) 和 框架 的 
(Frameset) 。 

(3) XML 1.0 

XML(eXtensible Markup Language, 可 扩展 置 标语 言 ) 是 当前 处 理 结 构 化 文档 信息 
的 有 力 工具 。 它 由 W3C 发 布 ,起初 的 目的 是 用 来 弥补 HTML 的 不 足 , 但 后 来 逐渐 用 于 
网 络 数据 的 转换 和 描述 方面 。 

简单 地 说 ,XML 是 一 种 表示 数据 的 方式 ,可 以 通过 多 种 方法 使 用 XML 封装 数据 ,一 
种 常见 的 处 理 方式 是 通过 XSLT( 可 扩展 样式 表 语 言 转 换 ) 对 XML 文档 进行 转换 ,以 生 
成 特定 的 结果 ,例如 转换 成 (X)HTML 输出 给 浏览 器 使 用 等 。 

(4) HTML 5 

HTML 5 是 HTML 规范 的 第 五 个 版 本 ,其 中 新 增 了 多 种 标签 ,并 且 可 以 进行 跨 平台 
的 使 用 ,更 多 内 容 将 在 后 续 章 节 陆 续 介绍 。 


2. 表现 标准 语言 

CSS(Cascading Style Sheet, 层 全 样式 表 ) 是 一 组 用 来 控制 网 页 外 观 的 规则 。 通 过 
CSS 可 以 将 样式 信息 与 网 页 内 容 分 离开 来 ,不 仅 使 站 点 外 观 维护 变 得 更 为 简便 ,还 可 以 
使 (X)HTML 文档 代码 结构 清晰 ,内容 简练 ,有 利于 缩短 浏览 器 加 载 页 面 的 时 间 。 目 前 ， 
CSS 的 版 本 有 CSS 2.0、CSS 2.1 和 CSS 3.0。 

3. 行为 标准 

(1) DOM 

DOM(Document Object Model ,文档 对 象 模型 ) 是 HTML 与 XML 的 应 用 编程 接口 ， 
它 使 脚本 语言 能 够 很 容易 地 访问 到 整个 文档 的 结构 ,内容 和 表现 。 

DOM 是 HTML 与 XML 文档 的 编程 基础 , 它 定 义 了 处 理 执行 文档 的 途径 。 编 写 者 
可 以 使 用 DOM 增加 文档 .定位 文档 结构 、 添 加 修改 删除 文档 元 素 , 可 以 说 DOM 给 了 脚 
本 语言 (如 ECMAScript) 无 限 发 挥 的 能 力 。 

(2) ECMAScript 

ECMAScript 是 ECMA (European Computer Manufacturers Association ,欧洲 计算 
机 厂商 协会 ) 制 订 的 一 种 基于 Netscape JavaScript 的 标准 脚本 语言 。 这 种 语言 在 互联 网 
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上 广泛 应 用 ,通过 DOM 可 以 操作 网 页 上 的 任何 对 象 。 由 于 这 些 改变 对 象 的 操作 十 分 容 
易 , 使 得 网 页 交互 性 大 大 增加 。 


1.1.2 表现 与 结构 相 分 离 

在 Web 标准 中 ,经 常会 提 到 “表现 与 结构 相 分 离 ” 这 句 话 ,如 何 快速 理解 其 含义 呢 ? 
这 里 从 网 页 的 内 容 、 结 构 、 表 现 和 行为 四 个 方面 进行 阐述 。 

1. 内 容 

这 里 的 “内 容 ? 指 的 是 访问 者 需要 获取 的 信息 , 它 可 以 是 数据 文字 和 图 片 等 类 型 ,不 


包含 诸如 装饰 性 图 片 在 内 的 辅助 信息 。 图 1-2 所 示 的 是 仅 包含 “ 内 容 ” 的 页 面 , 图 1-3 所 
示 的 是 添加 辅助 信息 后 的 页 面 。 
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图 1-2 仅 包含 “内 容 ” 的 页 面 


2. 结构 (Structure) 

“结构 ? 指 的 是 将 内 容 按照 一 定 的 类 别 和 层次 进行 有 机 排列 和 搭配 的 层次 结构 ,该 结 
构 具 有 逻辑 延续 性 。W3C 规范 的 结构 化 标准 语言 主要 包括 HTML、XHTML 和 HTML 
5 ,通过 这 些 语 言 能 够 使 页 面 内 容 具 有 逻辑 性 、 易 用 性 。 

在 HTML 5 中 包含 许多 语义 化 的 结构 化 的 标签 ,如 到 section 二 二 /section 二 、 
< 反 article 之 一 /article 之 和 二 header 之 一 /header 二 等 ,这 些 标签 的 使 用 方法 将 在 后 续 章 节 
讲解 。 

3. 表现 (Presentation) 

用 来 改变 内 容 外 观 的 样式 称 为 表现 。W3C 创建 表现 语言 CSS 标准 的 目的 就 是 希望 
CSS 取代 HTML 中 表格 式 布 局 的 语言 ,最 终 实现 表现 与 结构 相 分 离 ,图 1-4 所 示 的 就 是 


区 
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happy garden 
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nam tortor libero dictum porta 


Connecting pictures 
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图 1-4 通过 CSS 样式 实现 外 在 表现 的 网 站 实例 


通过 CSS 样式 实现 外 在 表现 的 网 站 实例 。 

4. 行为 [Behavior) 

行为 指 的 是 对 内 容 的 交互 及 其 操作 的 效果 。 图 1-5 所 示 的 是 在 网 站 注册 用 户 时 的 场 
景 , 当 在 “账户 名 ”中 输入 待 注册 的 邮箱 地 址 时 ,页 面 右 侧 会 实时 浮动 提示 框 ,实时 提醒 用 
户 注 册 时 需要 注意 的 问题 ,这 些 页 面 中 的 变化 都 要 归 为 DOM 和 JavaScript 的 作用 ,是 它 
们 把 行为 表现 出 来 的 。 
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您 所 在 的 国家 或 地 区 | 中 国 大 陆 ww 


人 @ 猴 入 的 手机 号 码 或 电子 邮箱 档 作 


123456789@126.com 
账户 名 @ Pe 


验证 吗 Ll Ws 
图 1-5 行为 的 外 在 表现 


综 上 所 述 ,页 面 是 由 “结构 “表现 "和 “行为 这 三 方面 组 成 的 ,内 容 是 基础 层 ,然后 是 
附加 上 去 结构 层 和 表现 层 , 最 后 再 对 其 添加 行为 。 刚 开始 理解 结构 和 表现 相 分 离 可 能 有 
点 困难 ,但 是 这 一 点 确实 非常 重要 。 当 结构 和 表现 相 分 离 后 ,用 CSS 文档 控制 表现 就 十 
分 方便 ,例如 要 想 让 整个 网 站 的 字体 增 大 点 ,只 要 简单 地 修改 CSS 文档 中 的 一 个 定义 就 
可 以 改变 整个 网 站 的 字体 大 小 , 整 站 的 维护 显得 更 为 容易 。 

所 以 ,初学 者 刚 开始 学 习 就 要 养 成 将 结构 和 表现 放 在 不 同 的 文件 中 ,通过 链接 将 CSS 
文档 或 JavaScript 文档 与 HTML 文件 联系 起 来 的 习惯 。 


1.1.3 HTML 5 时 代 


HTML 5 从 本 质 上 改变 了 Web 应 用 的 运作 模式 ,无 论 是 桌面 浏览 器 还 是 手机 的 移 
动 应 用 ,这 种 语言 和 标准 正在 极 大 程度 地 影响 各 种 操作 平台 。HTML 5 的 目标 是 为 编写 
出 更 加 有 语义 的 HTML 代码 ,以 及 创建 更 加 简单 的 Web 程序 ,为 此 他 开发 出 许多 新 属性 
和 新 元 素 ,并 提供 很 多 API, 为 下 一 代 Web 平台 提供 了 许多 新 功能 ,图 1-6 所 示 的 是 已 经 
使 用 HTML 5 构建 页 面 的 苹果 公司 官方 网 站 页 面 。 


30 


Happy Birthday Mac. 


探索 30 年 来 Mac 从 末 间 断 的 创新 


图 1-6 使 用 HTML 5 构建 的 页 面 
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在 HTML 5 之 前 ,诸如 让 文本 框 获得 光标 焦点 的 功能 需要 使 用 JavaScript 等 脚本 语 
言 才能 实现 ,如 果 使 用 HTML 5 则 只 须 使 用 元 素 的 属性 标签 即 可 完成 。 如 此 一 来 ,整个 


页 面 显得 非常 简洁 ,容易 理解 。 


此 外 ,HTML 5 新 增 的 语义 化 的 属性 标签 ,使 得 页 面 结构 变 得 十 分 清晰 ,弱化 了 无 语 
义 的 DIV 标签 ,这 种 语义 化 的 特征 不 仅 提 升 了 网 页 的 质量 和 语义 ,并 且 大 量 减少 了 曾经 


代码 中 用 于 CSS 必须 调用 的 Class 和 ID 属性 ,如 图 1-7 和 图 1-8 所 示 。 


语义 化 标签 有 利于 
检索 ， 页 面 结构 清晰 


滥用 无 语义 的 div 标 签 ， 会 使 
代码 频 肿 ， 不 利于 维护 和 美化 


| 


Fboay> T 
|<header id="page header"> 
<nav> </nav> 
|</header> 
|<section id="posts"> 
<article class="post"></article> 
|</section> 
|<section id="sidebar"> 
<nav></nav> 
|</seccion> 
|<foocer id="page footer"></footer> 
/body> 


body> T 
<aiv id="header"> 

<div id="header nav"></div>| 
/div> 
<aiv id="main"> 

<div id="content"></div> 
</div> 
<aiv id="sider"> 

<div id="sider nav"></div> 
</div> 
<aiv id="footer"></div> 
K/body> 


1-7 HTML 5 与 DIV 十 CSS 思 维 模式 下 代码 对 比 


body 


<header id="page_header"> 对 比 <div id="header"> 
<nav> 对 比 <div id="header_nav"> 


<section id="posts"> 对 比 <div id="main"> 


<article class="post"> 
对 比 


<div id="content"> 


<section id="sidebar"> 对 比 <div id="sider"> 


<div id="sider_nav"> 


<footer id="page_footer"> 对 比 <div id="footer> 


图 1-8 页 面 结构 示意 图 


1.2 网 站 的 人 门 知识 


下 


网 页 、 网 站 及 其 构成 元 素 


1. 网 页 
网 页 (Web Page) 是 一 个 文件 , 它 存放 在 某 一 台 与 互联 网 相连 的 计算 机 中 。 
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2. 网 站 

网 站 (Website) 是 用 于 展示 特定 内 容 的 相关 网 页 的 集合 ,网 站 中 各 个 网 页 是 由 超 链 接 
联系 起 来 的 。 访 问 者 进入 某 个 网 站 后 ,看 到 的 第 一 个 页 面 称 为 首页 ,通常 首页 的 文件 名 是 
index 或 default 加 上 扩展 名 。 


3. 网 页 的 构成 元 素 

在 互联 网 中 ,网 页 的 外 观 多 种 多 样 , 但 构成 网 页 的 基本 元 素 却 是 大 体 相同 的 ,一 般 包 
括 文本 、 图 像 . 超 链 接 、 表 单 .视频 和 音频 ,如 图 1-9 所 示 。 此 外 , 某 些 宣传 类 网 站 还 采用 纯 
Flash 动画 展现 网 站 内 容 。 
EE % CHE UE 


We Huawe! eto 1 8 1 Heat img [一 一 一 | 一 表单 


行业 和 只 方案 与 产 品 技术 支持 关于 华为 旦 体 中 心 。 加 入 华为 华为 商城 
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1-9 网 页 的 构成 元 素 


对 于 网 页 中 包含 的 各 类 元 素 , 读 者 需要 了 解 以 下 知识 。 

(1) 文本 和 图 像 

文本 和 图 像 是 网 页 中 最 基本 的 构成 元 素 。 对 于 文本 ,设计 者 可 以 使 用 不 同 的 字体 来 
美化 文本 内 容 ; 对 于 图 像 ,一 般 使 用 Photoshop 预先 进行 处 理 , 然 后 输出 合适 的 图 像 ,网 页 
中 使 用 最 多 是 JPEG .PNG 和 GIF 图 像 格式 。 

(2) 超 链接 

超 链 接 是 指 超 文本 内 由 一 文件 连接 至 另 一 文件 的 链接 。 当 用 户 单 击 超 链 接 时 ,其 指 
向 的 目标 内 容 将 显示 在 用 户 的 浏览 器 中 。 

默认 情况 下 ,浏览 器 会 用 一 些 特殊 的 方式 来 显示 超 链 接 , 如 鼠标 悬 停 时 的 颜色 、 触 发 
超 链 接 时 的 颜色 等 ,而 要 想 改变 这 些 显 示 属 性 需要 在 CSS 中 修改 。 
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(3) 表单 

表单 通常 用 来 收集 信息 或 实现 一 定 的 交互 效果 ,其 主要 功能 是 收集 用 户 在 浏览 器 中 
输入 的 信息 ,然后 将 这 些 信 息 发 送 到 目的 端 。 

(4) 动画 

目前 ,在 网 页 中 插入 Flash 动画 的 做 法 越 来 越 少 ,通常 设计 者 会 使 用 jQuery、 
JavaScript、CSS 和 HTML 5 制作 精美 动画 ,而 对 于 广告 类 的 动画 一 般 采 用 技术 含量 较 低 
的 GIF 动画 进行 展示 。 

(5) 音频 和 视频 

音频 和 视频 并 非 网 站 必需 的 元 素 ( 以 音乐 和 视频 为 主题 的 网 站 除外 ) ,因为 未 经 访问 
者 许可 自动 播放 的 音频 和 视频 ,可 能 会 给 访问 者 带 来 不 便 。 常 见 的 音频 格式 为 MP3 , 视 
频 格式 为 FLV。 


1.2.2 网 页 设计 的 原则 、 风 格 和 潮流 


用 户 体 验 良 好 的 网 页 交互 设计 ,不 在 于 使 用 了 何 种 先进 的 技术 ,而 是 取决 于 对 整个 页 
面 主题 、 风 格 、 整 体 布局 和 制作 水 平 的 精确 把 握 。 


1. 网 站 设计 的 基本 原则 

网 站 外 观 设计 的 精美 程度 直接 关系 到 门户 网 站 的 外 在 形象 和 访问 者 的 使 用 效率 ,以 
下 是 网 站 设计 中 应 注意 的 几 点 基本 原则 。 

(1) 明确 网 站 目标 和 用 户 需求 。 网 站 建立 的 目的 无 非 是 展现 目标 形象 .产品 或 服务 ， 
并 给 浏览 者 提供 所 需 的 信息 ,因此 必须 针对 不 同 的 客户 群体 .针对 访问 者 的 需求 ,市 场 环 
境 以 及 自身 情况 等 因素 进行 综合 分 析 , 明 确 网 站 的 目标 和 用 户 的 需求 。 网 页 设计 的 中 心 
始终 是 访问 者 ,而 不 能 完全 以 视觉 效果 为 中 心 。 

(2) 主题 鲜明 。 在 明确 目标 的 基础 上 ,通过 具体 的 功能 去 实现 网 站 的 主题 。 设 计 功 
能 时 要 根据 不 同 的 服务 对 象 采用 不 同 的 形式 ,可 以 调动 多 种 创造 手法 充分 表现 网 站 特点 ， 
做 到 主题 鲜明 ,要 点 明确 。 网 站 可 以 顾及 多 个 层次 的 对 象 ,但 必须 有 一 个 主体 对 象 ,要 用 
简单 明确 的 语言 和 画面 体现 站 点 的 主题 。 

(3) 注重 布局 设计 。 网 页 设计 以 科学 技术 和 视觉 艺术 为 基础 ,追求 网 页 编排 ,功能 和 
布局 的 协调 美观 。 网 页 的 布局 设计 通过 文字 和 图 像 等 元 素 的 空间 组 合 ,表达 出 网 页 和 谐 
的 美 , 也 使 浏览 者 有 一 个 流畅 的 视觉 体验 。 

(4) 避免 滥用 技术 。 网 页 技术 多 种 多 样 ,有 些 网 页 设计 人 员 喜 欢 使 用 多 种 网 页 技术 
丰富 自己 的 设计 ,殊不知 运用 恰当 的 技术 能 使 网 页 棚 棚 如 生 , 如 果 技 术 使 用 不 当 , 则 会 适 
得 其 反 。 因 此 ,使 用 网 页 技术 时 最 好 不 要 太 过 复杂 。 

(5) 及 时 更 新 维护 。 访 问 者 总 是 希望 看 到 新 鲜 的 信息 内 容 ,所 以 网 站 建立 后 要 不 断 
地 更 新 内 容 , 保 证 信息 的 时 效 性 ,这 是 一 项 非常 重要 的 工作 。 


2. 颜色 与 风格 
(1) 颜色 
颜色 作为 网 页 视觉 元 素 的 一 种 ,具有 不 可 估量 的 作用 。 颜 色 搭 配 是 网 页 设计 人 员 需 
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要 慎重 考虑 的 问题 ,良好 的 色彩 搭配 能 使 网 页 内 容重 点 突出 ,风格 统一 ,易于 浏览 ,大 大 强 
化 网 页 的 视觉 张力 。 网 页 中 的 颜色 搭配 可 以 从 以 下 几 方 面 进行 考虑 。 

Q@ 颜色 种 类 。 在 网 页 中 使 用 的 颜色 尽量 不 要 超过 4 种 ,颜色 太 多 会 使 浏览 者 感觉 没 
有 重点 。 当 主题 颜色 确定 后 ,可 以 考虑 调整 透明 度 或 饱和 度 ,以 得 到 一 系列 的 颜色 ,这 样 
能 使 页 面 看 起 来 具有 层次 感 。 

@ 总 体 统一 ,局 部 反差 。 网 页 的 总 体 色调 应 该 是 统一 的 ,在 某 些 局 部 或 小 范围 内 可 
以 使 用 一 些 强 烈 的 色彩 对 比 ,这 样 能 起 到 锦上添花 的 效果 。 此 外 ,色彩 还 受 文化 ,传统 、 地 
域 等 因素 的 影响 ,充分 运用 这 些 特性 ,可 以 使 页 面具 有 深刻 的 文化 底蕴 。 

@ 文字 与 背景 色 的 对 比 。 网 页 背景 色 的 深浅 要 运用 合理 。 一 般 的 , 深 色 背 景 要 搭配 
浅 色 文 字 , 浅 色 背 景 要 搭配 深 色 文字 。 但 是 色彩 的 明度 反差 不 能 过 大 ,否则 屏幕 上 的 亮度 
反差 太 强 ,会 使 访问 者 眼睛 感到 不 适 。 

(2) 风格 

风格 即 网 站 的 特点 , 指 的 是 浏览 者 对 网 站 内 容 和 形式 的 直观 感受 ,所 透露 出 来 的 是 设 
计 者 的 文化 品位 。 

有 价值 的 内 容 是 网 站 风格 的 基础 ,而 创意 则 是 风格 的 灵魂 。 从 访问 者 接受 信息 的 顺 
序 来 看 ,起 初 网 站 的 外 观 是 吸引 访问 者 的 关键 , 随 着 浏览 者 不 断 深入 了 解 , 会 逐渐 增加 对 
网 站 内 容 的 各 种 感受 ,为 此 网 站 的 风格 定位 可 从 以 下 几 方 面 考虑 。 

@ 确保 网 页 界面 有 较 强 的 一 致 性 ,使 网 站 形成 统一 的 风格 界面 ,这 里 的 一 致 性 包括 
字体 ,标题 .图 像 背 景 颜色 和 注脚 等 。 这 些 构 成 网 页 的 基本 元 素 形成 统一 的 整体 ,具有 自 
身 特色 风格 ,会 使 访问 者 获得 更 深层 次 的 感性 认识 。 

@ 确保 网 页 界面 美观 ,简洁 ,易于 访问 。 

@ 合理 安排 网 页 元 素 , 要 让 访问 者 在 浏览 网 页 过 程 中 体验 到 视觉 的 秩序 感 , 节 奏 感 
和 新 奇 感 。 

一 般 地 ,在 实际 应 用 中 政府 类 的 网 站 表现 出 庄严 .严谨 的 风格 ;公司 企业 类 的 网 站 具 
有 主题 突出 、 风 格 简约 的 特点 ;娱乐 类 网 站 则 以 活泼 ,时尚 .生动 为 主要 风格 ;个 人 网 站 则 
注重 突出 个 性 化 的 特点 。 


3. 网 站 赏析 

由 于 不 同类 型 的 网 站 在 定位 目标 群体 时 存在 差异 ,因此 出 现 不 同类 型 和 风格 的 页 面 。 
下 面 从 流行 设计 趋势 角度 向 读者 介绍 一 些 经 典 网 站 设计 。 

(1) 扁平 化 设计 类 网 站 

扁平 化 设计 的 核心 是 放弃 一 切 装 饰 效果 ,诸如 阴影 .透视 .纹理 和 渐变 等 ,所 有 元 素 的 
边界 干净 利落 ,没有 任何 羽化 ,渐变 或 阴影 ,如 图 1-10 所 示 。 

(2) 全 屏 背 景 类 网 站 

目前 , 越 来 越 多 的 设计 师 青 睐 全 屏 背 景 的 设计 ,他 们 大 多 采用 大 图 ,视频 、 精 致 的 背 
景 、 纹 理 吸 引用 户 的 眼球 ,如 图 1-11 所 示 。 

(3) 网 格 布局 类 网 站 

“网 格 ” 属 于 平面 构成 的 设计 方法 ,鉴于 目前 很 多 网 站 布局 排版 过 于 单调 ,设计 师 将 网 
格 理念 应 用 于 网 站 ,呈现 出 与 众 不 同 的 效果 ,如 图 1-12 所 示 。 
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图 1-10 扁平 化 设计 类 网 站 


图 1-11 全 屏 背 景 类 网 站 


图 1-12 网 格 布局 类 网 站 


(4) 卡通 插画 风格 类 网 站 
令 人 人 愉悦 的 卡通 人 物 和 妙趣 横生 的 图 像 极 富 娱乐 性 ,设计 师 通过 艺术 风格 为 网 页 加 
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入 一 些 趣味 性 的 元 素 , 这 也 使 网 页 不 再 循规蹈矩 ,如 图 1-13 所 示 。 
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图 1-13 卡通 插画 风格 类 网 站 


(5) 背景 虚 化 类 网 站 

背景 虚 化 能 够 引导 访问 者 将 焦点 放 在 需要 突出 表现 的 内 容 上 面 。 选 择 什么 样 的 背景 
作 虚 化 ,对 整个 画面 效果 将 产生 很 重要 的 影响 ,一 般 虚 化 用 的 背景 以 暗 面 居多 ,如 图 1-14 
所 示 。 


prototyping 6 
中 ， 
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图 1-14 背景 虚 化 类 网 站 


(6) 大 字体 类 网 站 

在 网 页 设计 中 ,大 字体 设计 是 一 个 很 好 的 展示 网 站 特色 的 方法 , 它 可 以 一 目 了 然 地 向 
用 户 传达 网 站 的 信息 ,并 给 人 留 下 深刻 的 印象 。 通 常 .这 些 大 字体 指 的 是 网 站 的 Logo、 标 
语 或 口号 ,如 图 1-15 所 示 。 


1.2.3 网 站 建设 的 基本 流程 


网 站 建设 前 期 除了 与 客户 保持 良好 的 沟通 和 交流 外 ,更 重要 的 是 要 遵循 网 站 建设 的 
基本 流程 ,如 图 1-16 所 示 。 只 有 这 样 ,才能 做 到 既 不 浪费 时 间 又 能 提高 网 页 制作 人 员 的 
工作 效率 ,同时 还 能 保证 网 站 的 科学 性 和 严谨 性 。 

1. 前 期 一 一 调研 与 策划 

网 站 前 期 的 调研 与 策划 是 网 站 能 够 成 功 运作 的 重要 环节 。 在 此 环节 中 主要 对 市 场 进 
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图 1-15 大 字体 类 网 站 
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图 1-16 网 站 建设 的 基本 流程 图 


行 分 析 ,充分 与 客户 沟通 ,掌握 其 真实 需求 ,确定 网 站 的 目标 、 核 心 功能 .风格 定位 等 内 容 。 
- 般 的 网 站 前 期 调研 与 规划 主要 涉及 以 下 几 个 方面 。 

(1) 用 户 需 求 调研 

网 站 建设 的 团队 要 与 客户 进行 充分 交流 ,正确 引导 客户 将 自己 的 实际 需求 表达 出 来 ， 
以 明确 建设 网 站 的 目的 和 具体 要 求 。 必 要 时 还 要 请 客户 提供 他 们 所 欣赏 的 网 站 实例 , 进 
- 步 确 定 用 户 的 理想 目标 和 功能 需求 。 在 充分 了 解 客户 的 所 有 要 求 后 ,结合 网 站 的 技术 
特点 ,提出 网 站 的 设计 草案 ,与 客户 反复 商讨 ,以 得 到 客户 的 认可 。 

(2) 搜集 整理 素材 

明确 了 网 站 的 主题 后 ,就 要 围绕 网 站 主题 搜集 素材 。 客 户 提供 的 各 种 资料 是 非 
常 重要 的 素材 之 一 ,此 外 还 需要 详细 搜集 与 主题 相关 的 图 片 、 文 字 、 音 频 、 视 频 和 动 
画 等 内 容 。 
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(3) 网 站 策划 

网 站 策划 的 好 坏 将 直接 影响 网 站 的 整体 效果 ,而 且 是 网 站 发 布 后 能 否 成 功 运行 的 重 
要 因素 。 网 站 策划 所 涉及 的 方面 很 多 ,主要 包括 网 站 的 整体 结构 .主题 定位 .风格 设计 、 色 
彩 搭配 ,版面 布局 ,文字 与 图 片 的 运用 以 及 网 站 策划 书 的 撰写 等 。 只 有 在 网 页 具体 制作 前 
把 这 些 方面 都 考虑 全 面 了 ,制作 出 来 的 网 页 才 具 有 吸引 力 。 可 以 说 网 站 策划 对 整个 网 站 
建设 具有 指导 和 定位 的 作用 。 

(4) 选择 服务 器 解决 方案 

一 般 地 ,服务 器 的 解决 方案 有 自 备 主机 、 租 用 虚拟 主机 、 主 机 托管 等 ,具体 情况 要 根据 
客户 的 实际 需要 确定 。 


2. 中 期 一 一 实施 与 细 化 

此 环节 是 网 站 建设 的 具体 实施 与 细 化 阶段 ,在 前 期 策划 得 到 客户 认可 后 ,需要 将 整个 
网 站 建设 细 化 为 两 大 部 分 进行 ,一 是 前 台 页 面 设计 与 制作 ,二 是 后 台 程序 的 功能 开发 与 实 
现 。 具 体内 容 主要 涉及 以 下 几 个 方面 。 

(1) 网 站 外 观 设计 

网 站 的 外 观 设计 将 直接 影响 访问 者 的 兴趣 ,精心 策划 的 网 站 建设 方案 最 终 是 要 通过 
网 页 表现 出 来 ,因此 必须 在 页 面 制作 风格 上 有 一 个 明确 的 定位 ,使 网 站 的 基本 格调 符合 客 
户 的 要 求 。 网 站 的 外 观 设 计 主 要 包括 Logo 设计 、 标 准 字 、 标 准 色 ,布局 .Banner、 图 标 和 
菜单 等 ,一 般 地 ,需要 设计 多 套 不 同 风格 的 样稿 交 客户 讨论 并 提出 修改 意见 ,直到 客户 
认可 。 

(2) 页 面 制 作 

在 网 站 外 观 设 计 完 成 后 ,就 要 将 其 制作 成 HTML 页 面 , 供 后 台 程 序 开发 人 员 将 程序 
整合 在 页 面 中 。 制 作 页 面 时 ,首先 要 对 设计 稿 的 布局 和 配色 有 整体 认识 ,然后 根据 规划 要 
求 对 设计 稿 进行 切片 ,最 后 使 用 CSS 布局 的 方式 将 网 页 制作 出 来 。 

(3) 后 台 程 序 开发 

后 台 程 序 主 要 实现 后 台数 据 库 的 事务 处 理 ,同时 负责 数据 库 与 前 台 页 面 间 的 连接 。 
程序 开发 人 员 在 编写 Web 程序 时 ,需要 选择 合适 的 解决 方案 将 页 面 文件 与 事务 逻辑 结合 
在 一 起 。 

(4) 网 站 测试 

网 站 制作 是 一 个 非常 复杂 的 过 程 .需要 经 过 反复 的 测试 .审核 和 修改 , 待 确定 无 误 后 
才能 正式 发 布 。 测 试 的 项 目 一 般 包括 文字 内 容 的 正确 性 各 链接 的 有 效 人 性、 浏览 器 兼容 
性 、 功 能 模块 的 正确 性 。 在 测试 过 程 中 ,需要 反复 听取 各 方 意见 和 建议 ,不 断 完善 功能 , 直 
到 客户 满意 。 


3. 后 期 一 一 维护 与 更 新 

网 站 建设 完成 交付 给 客户 后 ,还 涉及 后 期 维护 与 更 新 的 问题 ,由 于 网 站 维护 具有 专业 
性 和 长 期 性 ,这 些 维护 服务 应 在 前 期 策划 时 与 客户 商定 清楚 。 一 般 地 ,网 站 维护 与 更 新 主 
要 有 以 下 几 个 方面 需要 注意 。 

(1) 定期 检查 网 络 和 计算 机 的 工作 状态 ,对 网 站 运行 状况 进行 监控 ,发 现 问 题 及 时 解 
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决 。 在 保证 网 站 运行 状态 下 ,根据 客户 需要 对 网 页 网 站 内 容 进行 增加 、 删 除 和 修改 。 
(2) 维护 数据 库 后 台 的 正常 运行 ,并 及 时 备份 数据 库 内 容 。 
(3) 采取 有 效 的 安全 防范 措施 ,防止 黑客 人 侵 , 造 成 数据 损坏 ,泄露 机 密 等 。 
(4) 建立 系统 安全 管理 和 计算 机 使 用 管理 制度 。 


1.2.4 开发 与 调试 工具 
对 于 网 站 前 端 页 面 的 开发 来 说 ,常用 的 软件 主要 有 以 下 几 种 。 


1. 文本 编辑 器 

任何 一 种 文本 编辑 器 都 可 以 编写 HTML ,比如 记事 本 、 写 字 板 和 Word 等 ,但 有 些 文 
本 编辑 器 (如 EditPlus、NotePad ++ 和 UltraEdit 等 ) 提 供 网 页 制作 及 程序 设计 等 许多 有 
用 的 功能 ,支持 HTML、CSS、PHP、ASP、C/C++ 、Java、JavaScript、VBScript 等 多 种 语法 
的 着 色 显示 。 


2. Dreamweaver 
Dreamweaver 是 最 广泛 的 网 页 编辑 工具 之 一 , 它 采 用 多 种 先进 技术 ,能 够 快速 高 效 
地 创建 极 具 表现 力 和 动感 效果 的 网 页 ,使 网 页 创作 过 程 变 得 非常 简单 。 


3. Photoshop 

Photoshop 在 网 站 效果 设计 图 像 编 辑 、 婚 纱 摄影 等 各 领域 广泛 应 用 , 它 已 成 为 许多 
涉及 图 像 处 理 的 行业 的 事实 标准 。 此 外 ,除了 位 图 编辑 工具 Photoshop 之 外 ,还 有 
Illustrator、CorelDraw、\ 博 硕 网 页 设计 师 等 其 他 第 三 方 工 具 能 够 作为 辅助 工具 对 网 页 进行 
设计 。 

4. Visual Studio 

Visual Studio 是 一 个 基本 完整 的 开发 工具 集 , 它 包 括 了 整个 软件 生命 周期 中 所 需要 
的 大 部 分 工具 ,可 帮助 用 户 为 Microsoft 平台 和 其 他 平台 创建 各 种 各 样 的 应 用 程序 。 


5. 浏览 器 

不 同 的 浏览 器 对 HTML 5 的 支持 程度 不 同 , 这 就 造成 了 浏览 器 在 解析 HTML 文档 
后 ,页 面 显示 的 效果 不 同 ,这 种 浏览 器 兼容 性 问题 是 网 页 前 端 开发 人 员 经 常 遇 到 的 且 必 须 
解决 的 问题 。 

在 为 桌面 浏览 器 做 HTML 5 应 用 开发 或 网 站 开发 的 过 程 中 ,综合 各 种 情况 ,这 里 推 
荐 使 用 谷歌 的 Chrome 浏览 器 和 360 安全 浏览 器 (所 用 内 核 与 Chrome 浏览 器 相同 ) 。 

(1) Chrome 浏览 器 

Chrome 浏览 器 是 目前 HTML 5 支持 程度 最 高 的 浏览 器 ,在 学 习 HTML 5 和 CSS 3 
过 程 中 ,为 了 能 预览 到 最 终 效 果 ,Chrome 浏览 器 是 最 好 的 选择 。 

(2) 360 安全 浏览 器 

目前 ,对 HTML 5 支持 较 好 的 浏览 器 除了 Chrome 之 外 ,还 有 Maxthon、Opera、360 
安全 浏览 器 和 Firefox 等 。 此 外 , 某 些 浏览 器 还 为 开发 者 提供 插件 ,例如 ,360 安全 浏览 器 
在 打开 任意 网 页 时 , 按 Fl12 键 , 即 可 进入 开发 人 员 模 式 , 开 发 者 可 以 详细 查看 当前 页 面 的 
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HTML 文档 和 对 应 的 CSS 样式 ,如 图 1-17 所 示 。 
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图 1-17 360 安全 浏览 器 开发 者 环境 


1.3 习题 


1. 什么 是 Web 标准 ? 

2. 如 何 正确 理解 “表现 与 结构 相 分 离 ”? 

3. 网 页 构成 的 元 素 包 含 哪些 ?请 举例 说 明 。 

4. 
HTML 5 分 数 (分 数 越 高 说 明 对 HTML 5 的 支持 度 越 好 ) 。 

5. 网 站 设计 的 基本 原则 有 哪些 ? 

6. 概述 网 站 建设 的 基本 流程 。 


访问 HTML 5 测试 网 站 (http://html 5test. com/) ,查看 当前 浏览 器 测试 后 的 
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【本 章 导 读 】 

HTML 语言 是 网 页 制作 的 基础 , 它 对 后 期 网 页 制作 水 平 的 提高 有 重要 影响 。 本 章 从 
HTML 的 历史 沿革 谈 起 ,着 重 向 读者 介绍 HTML 5 的 文档 结构 及 其 常见 标签 的 含义 。 
对 于 初学 者 来 说 ,学 习 各 种 标签 可 能 非常 枯燥 ,但 这 是 成 为 Web 前 端 设计 师 的 必 经 阶段 。 

【学 习 目 标 】 

二 了 解 HTML 4.01 到 HTML 5 的 发 展 历史 ; 

名 掌握 HTML 5 的 文档 结构 和 编写 规范 ,并 熟知 与 (X)HTML 的 区 别 ; 

名 理解 HTML 5 中 常见 元 素 的 含义 ,并 重点 认 知 HTML 5 主体 结构 类 元 素 的 含义 ; 

局 能 够 使 用 记事 本 编写 页 面 布 局 简单 的 HTML 5 文档 。 


2.1 HTML 的 历史 沿革 


HTML 通过 标签 来 标记 要 显示 在 网 页 中 的 各 个 部 分 。 浏 览 器 在 解析 网 页 文件 时 , 根 
据 不 同 标签 来 解释 和 显示 其 标记 的 内 容 , 这 样 浏览 者 才能 在 浏览 器 中 看 到 真实 的 网 页 。 


2.1.1 HTML 4.01 到 XHTML 


HTML 早 在 20 世纪 80 年 代 末 由 科学 家 蒂 姆 。 伯 纳 斯 。 李 创建 ,后 来 IETF( 互 联网 
工程 任务 组 ) 用 简化 的 SGML( 标 准 通用 标记 语言 ) 进 一 步 发 展 HTML 并 成 为 国际 标准 ， 
最 后 由 万 维 网 联盟 (W3C) 维 护 。 

其 实 ,HTML 1.0 并 不 存在 ,HTML 发 布 的 第 一 个 官方 版 本 就 是 由 IETF 在 1995 年 
推出 的 HTML 2.0 版本。 随后 ,HTML 有 了 较 大 幅度 的 发 展 ,1996 年 推出 HTML 3. 2 
版 本 ,1997 年 推出 HTML 4.0 版 本 ,1999 年 推出 HTML 4. 01 版 本 。 随 着 HTML 的 发 
展 ,W3C 取代 IETF 的 角色 ,掌握 了 对 HTML 规范 的 控制 权 。 

在 快速 发 布 了 多 个 版 本 之 后 ,业界 普遍 认为 HTML 已 经 到 了 穷 途 末 路 的 阶段 ,对 
Web 标准 的 焦点 也 开始 转移 到 了 XML 和 XHTML 上 。 


2.1.2 从 XHTML 到 HTML 5 


HTML 在 HTML 4. 01 之 后 的 第 一 个 修订 版 本 便 是 XHTML 1. 0, 这 里 X 代表 
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extensible, 即 “可 扩展 ”。 由 于 XHTML 1.0 是 基于 HTML 4.01 的 ,所 以 并 没有 引入 任 
何 新 标签 或 属性 ,唯一 区 别 就 是 语法 的 严谨 程度 , HTML 的 语法 要 求 比 较 宽 松 , 而 
XHTML 则 要 求 相 对 严格 。 

从 本 质 上 讲 ,XHTML 是 一 个 过 渡 技 术 , 结 合 了 部 分 XML 的 强大 功能 及 大 多 数 
HTML 的 简单 特性 。 

2002 年 第 一 份 XHTML 2. 0 标准 草案 发 布 ,但 它 的 完成 度 很 低 ,而 且 此 后 的 工作 进 
展 迟 组 ,所 以 在 2004 年 的 时 候 , 业 界 联 合 热 心 的 投资 人 、 浏 览 器 厂商 、 网 页 设计 师 , 自 立 门 
户 成 立 了 名 为 WHATWG(Web HyperText Application Technology Working Group) 的 
组 织 , 并 致力 于 开发 HTML 5。 

2006 年 W3C 决定 停止 XHTML 的 工作 , 转 而 开始 与 WHATWG 合作 ,重新 介入 
HTML, 并 于 2008 年 发 布 了 HTML 5 的 工作 草案 。2012 年 7 月 W3C 和 WHATWG 已 
经 结束 其 联合 开发 的 标准 ,同年 W3C 发 布 了 首 个 nightly 草案 ,计划 在 2014 年 发 布 完整 
的 HTML 5 标准 。 

此 外 ,通过 对 主流 新 闻 的 观察 ,也 能 够 感受 到 HTML 5 正在 被 逐渐 重视 ,并 广泛 推广 
和 使 用 。 

名 2010 年 1 月 ,YouTube 提供 HTML 5 视频 播放 器 。 

名 2010 年 4 月 ,乔布斯 公开 封杀 Flash, 这 使 得 更 多 公司 开始 关注 HTML 5。 

名 2010 年 11 月 ,使 用 HTML 5 技术 的 Chrome Web Store 应 用 商店 发 布 。 

名 2011 年 5 月 ,迪士尼 收购 HTML 5 游戏 引擎 。 

名 2011 年 8 月 ,亚马逊 推出 采用 HTML 5 技术 的 云 阅读 器 。 

名 2011 年 11 月 ,Adobe 停止 为 移动 设备 开发 Flash 播放 器 , 转 而 专注 于 HTML5 工 

具 。 

名 2012 年 6 月 ,Linkedln 推出 基于 HTML 5 的 原生 态 iPad 应 用 。 

名 2013 年 1 月, 市场 调研 机 构 Strategy Analytics 表示 ,全 球 市 场 拥有 超过 10 亿 部 

支持 HTML 5 技术 的 手机 。 

通过 以 上 对 HTML 历史 发 展 的 了 解 ,基本 上 可 以 让 人 放心 .大 胆 地 使 用 HTML 
本 


2.1.3 HTML 5 要 解决 的 问题 


HTML 5 技术 被 各 种 终端 .操作 系统 .厂商 广泛 支持 , 它 具 有 跨 平台 特性 ,拥有 海量 
的 内 容 资源 ,庞大 的 开发 者 群体 ,被 公认 为 是 未 来 最 重要 的 应 用 开发 技术 之 一 。 目 前 ， 
HTML 5 要 解决 的 问题 主要 有 以 下 两 个 方面 。 

1. 文档 结构 方面 的 问题 

在 之 前 的 HTML 版 本 中 ,文档 的 结构 不 够 清晰 、 明 确 。 一 般 地 ,页 面 都 采用 div 元 
素 , 再 配合 id 属性 或 class 属性 进行 布局 ,但 对 于 搜索 引擎 或 屏幕 阅读 器 等 程序 来 说 ,过 
多 的 div 元 素 很 难 分 清楚 哪些 是 文章 的 正文 ,而 在 HTML 5 中 ,新 增 了 很 多 与 结构 相关 
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的 元 素 ,能 够 解决 此 类 问题 。 


2. Web 应 用 程序 功能 限制 方面 的 问题 

HTML 与 Web 应 用 程序 的 关系 十 分 薄弱 。Web 应 用 程序 的 特征 是 先 从 网 络 下 载 ， 
然后 忠实 运行 ,因此 应 该 对 会 威胁 到 用 户 安全 的 功能 进行 限制 。 为 了 弥补 这 方面 的 不 足 ， 
HTML 5 已 经 开始 提供 各 种 各 样 Web 应 用 上 的 新 API, 各 浏览 器 也 在 快速 地 封装 着 这 些 
API,HTML 5 已 经 使 富 Web 应 用 的 实现 变 为 可 能 。 


2.2 文档 结构 


既然 网 页 的 本 质 是 超 文本 置 标语 言 编辑 后 的 文档 内 容 ,那么 从 结构 上 讲 ,就 应 该 符合 
某 种 结构 形式 ,本 节 主 要 向 读者 介绍 HTML 5 的 文档 结构 。 为 了 更 好 地 理解 ,这 里 给 出 
一 份 简单 的 HTML 5 文档 代码 。 

【案例 2-1〗 HTML 5 文档 结构 。 


< !Goctype html> 
<html> 
<head> 

<meta charset= "utf- 8"> 

<title> HIML 5 文档 结构 < /title> 
< /heac> 


<body> 
<header id- "page header"> 这 里 是 页 面 头 部 区 域 < /header> 
<nav id- "page_nav"> 这 里 是 页 面 的 导航 部 分 < /nav> 
< section> 
<article> 
<hl> 文 章 的 标题 < /bl> 
< 队 这 里 是 文章 的 正文 < /> 
</article> 
< /section> 
<aside> 这 里 是 页 面 的 侧 边 栏 < /aside> 
<footer ic "page_footer"> 这 里 是 页 面 的 底部 区 域 < /footer> 
< /body> 
< /htm> 


为 了 让 读者 更 加 容易 地 理解 文档 结构 及 其 各 种 标签 的 含义 ,下 面 将 对 其 内 容 分 别 讲 
解 。 另 外 ,由 于 Chrome 浏览 器 对 HTML 5 和 CSS 3 支持 程度 较 高 ,这 里 约定 本 书 所 有 
案例 均 采用 Chrome 浏览 器 进行 预览 和 调试 。 


2.2.1 标签 元素、 属性 和 值 


1. 什么 是 标签 
HTML 标签 由 一 对 尖 括 号 “< 和” 和 ”之 ”, 以 及 标签 名 组 成 。 标 签 分 为 “起 始 标签 ”和 
“结束 标签 ”两 种 ,如 图 2-1 所 示 。 这 里 footer 为 标签 名 称 ,二 footer 记 为 起 始 标 签 ， 
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二 /footer 二 为 结束 标签 。 标签 名 称 
网 页 中 每 个 标签 都 有 特定 的 描述 功能 , HTML 文档 NS 

就 是 通过 不 同 功能 的 标签 来 控制 Web 页 面 内 容 的 。 人 
2. 什么 是 元 素 起 始 标签 结束 标签 
HTML 元 素 是 组 成 HTML 文档 的 最 基本 的 部 件 , 例 图 2-1 标签 


如 在 案例 2-1 中 html、head、header、 section、hl 和 p 等 均 
为 HTML 元 素 ,只 是 它们 的 功能 各 有 不 同 而 已 。 
按照 有 无 内 容 来 划分 ,可 以 分 为 “有 内 容 的 元 素 ”" 和 “ 空 元素 ”; 按 照 元 素 排 列 状态 划分 
可 以 分 为 “ 块 级 元 素 ”" 和 “内 联 元 素 ”。 
“ 块 级 元 素 ” 是 从 一 个 新 行 开始 显示 的 ,其 后 面 的 元 素 也 需要 另 起 一 行进 行 显示 。 
例如 : 
<body> 
<p> (1)p 元 素 是 块 级 元 素 ,其 后 面 的 元 素 需 要 另 起 一 行进 行 显示 。< /p> 
<P> (2)p 元 素 是 块 级 元 素 ,其 后 面 的 元 素 需 要 另 起 一 行进 行 显示 。< /p> 
< /body> 
在 浏览 器 中 预览 的 效果 如 图 2-2 所 示 。 此 外 ,标题 ,列表 、 表 格 、div 和 body 等 元 素 都 
是 “ 块 级 元 素 ”。 


6 合 C | 口 /配套 网 站 /ch02/ 块 级 元 素 与 内 联 元 球 html Z| 三 


(1) p 元 素 是 块 级 元 素 ， 其 后 面 的 元 素 需要 另 起 一 行进 行 显示 。 
(2) p 元 素 是 块 级 元 素 ， 其 后 面 的 元 素 需要 另 起 一 行进 行 显示 。 


2-2 ” 块 级 元 素 p 的 网 页 预览 效果 


“内 联 元 素 " 不 需要 男 起 一 行进 行 显示 ,其 后 面 的 元 素 也 不 需要 男 起 一 行进 行 显示 。 
例如 : 
<body> 
<a href= 哇 "> (1)a 元 素 是 内 联 元 素 ,其 后 面 的 元 素 不 需要 另 起 一 行进 行 显示 。< /a> 


<ahref= 嘲 "> (2)a 元 素 是 内 联 元 素 ,其 后 面 的 元 素 不 需要 另 起 一 行进 行 显示 。< /a> 
< /body> 


在 浏览 器 中 预览 的 效果 如 图 2-3 所 示 。 此 外 ,a、em、span 等 元 素 都 是 内 联 元 素 。 


后 言 CD file:///E/ 配 套 网 站 /ch02/ 块 级 元 素 html 
a 苑 素 是 内 联 元 喜 ， 其 后 画 的 元 素 不 需要 另 起 一 行进 行 显示 。 as 元素 是 内 联 元 各 其 后 面 的 元 素 不 需要 另 起 一 行进 行 显示 。 


2-3 ”内 联 元 素 a 的 网 页 预览 效果 
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3. 什么 是 属性 和 值 

在 各 种 元 素 的 起 始 标签 中 ,还 可 以 添加 一 个 或 多 个 “属性 ?来 表示 元 素 的 其 他 特性 , 属 
性 与 值 之 间 用 等 号 进行 连接 ,其 值 用 双 引 号 进行 标注 ,例如 在 案例 2-1 中 二 header 二 标签 
内 部 包含 了 一 个 id 属性 ,该 属性 的 值 是 "page_header"。 


2.2.2 DOCTYPE 声明 


DOCTYPE 是 document type (文档 类 型 ) 的 简写 ,在 Web 设计 中 用 来 说 明 当 前 的 
XHTML 或 HTML 是 什么 版 本 。 该 标签 必须 以 感叹 号 (1) 开 始 ,而 且 要 放 在 文档 的 开始 
处 ,其 他 所 有 标签 之 前 。 要 建立 符合 标准 的 网 页 ,DOCTYPE 声明 是 必 不 可 少 的 关键 组 
成 部 分 ,否则 页 面 的 CSS 会 失效 或 半 失 效 ,也 就 是 说 如 果 没 有 这 个 DOCTYPE 声明 ,将 会 
导致 CSS 失效 ,特别 是 没有 声明 或 声明 不 正确 的 时 候 ,浏览 器 则 会 认为 当前 页 面 有 些 “ 古 
怪 ”, 其 显示 内 容 将 不 再 正确 。 

以 下 是 HTML 5 的 DOCTYPE 声明 : 


< !goctype html> 
以 下 是 XHTML 的 DOCTYPE 声明 


< !DOCTYPE html EUBLIC "~- /NBC//DID XHTML 1.0 Transitional//EN 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll- transitional .dbd"> 


以 下 是 HTML 4.01 的 DOCTYPE 声明 : 


< !DOCTYPE, HIML FUBLIC "- /MWBC//DID HIML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/lo0se.dtd"> 

通过 上 述 多 个 HTML 版 本 之 间 的 对 比 ,可 以 发 现 HTML 5 版 本 中 DOCTYPE 声明 
最 为 简洁 ,记忆 起 来 也 最 为 方便 。 


2.2.3 html 元素、head 元 素 与 body 元 素 


对 于 任何 网 页 文档 来 讲 , 基 本 结构 元 素 都 主要 有 3 个 ,分 别 是 html 元 素 、head 元 素 
和 body 元 素 。 这 些 元 素 均 出 现在 每 个 网 页 上 ,而 且 只 能 出 现 一 次 。 


1. html 元 素 
html 元 素 是 包含 网 页 文件 最 外 围 的 一 对 标签 ,其 作用 是 告诉 浏览 器 整个 文件 是 
HTML 格式 ,并 且 从 一 html 盖 开始 ,至 一 /html> 结 束 。 


2. head 元 素 
head 元 素 内 部 包含 的 是 网 页 的 头 部 信息 ,这 些 信息 不 会 作为 内 容 显示 在 网 页 正文 
中 ,而 是 为 浏览 器 提供 信息 。head 元 素 中 可 以 包含 以 下 元 素 。 
名 title 元 素 : 一 title 二 标签 的 内 容 将 出 现在 浏览 器 的 左上 角 。 其 目的 在 于 告诉 访问 
者 本 网 站 的 主题 。 
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忌 meta 元 素 : 二 meta 祖 标签 内 部 不 包含 任何 内 容 , 其 属性 定义 了 与 文档 相关 的 值 ， 
这 些 信 息 常 被 搜索 引擎 用 于 检索 网 页 。 

名 link 元 素 : 二 link 盖 标签 的 内 容 用 于 链接 外 部 CSS 和 JavaScript 等 文件 。 

astyle 元 素 : 在 二 style 二 标签 内 部 可 以 书写 作用 于 本 页 面 的 CSS 规则 。 


3. body 元 素 

body 元 素 为 文件 主题 内 容 最 上 层 元 素 ,页 面 中 所 有 元 素 均 应 放置 其 中 。 
【案例 2-2】 认 知 文档 的 基本 结构 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 以 下 代码 。 


< !goctype html> 
<htm> 
<head> 
<meta charset= "utf- 8" name= "keywords" content= "这 里 是 网 站 的 关键 字 "> 
<meta name= "description" content= "这 里 是 网 站 的 描述 "> 
<title> 认 知 文档 的 基本 结构 < /title> 
< style type= "text/css"> 
body { 
color: blue; 
} 
</style> 
< /heac> 
<body> 
页 面 中 所 有 字体 均 为 蓝 色 ! 
< /body> 
< /htm> 


@ 执行 记事 本 菜单 栏 中 的 "文件 "~ 另存“ 革 本 
站 认 知 文档 的 基本 结构 
为 ”命令 ,在 弹出 的 对 话 框 中 输入 准备 保存 的 网 6 全 C | 口 文 们 89 基本 结构 htmli9| 三 
页 文件 名 ,如 *2-2 认 知 文档 的 基本 结构 . html”。 
@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 
效果 如 图 2-4 所 示 。 
通过 本 例 可 知 , 到 title 之 标签 的 内 容 出 现在 图 2-4 案例 2-2 的 预览 效果 
浏览 器 的 左上 角 ; 二 meta 二 标签 的 内 容 没 有 显示 
在 页 面 中 ;二 style 志 标签 内 部 的 规则 作用 于 本 页 面 ,使 得 所 有 网 页 文字 变 为 蓝 色 。 


页 面 中 所 有 字体 均 为 蓝 色 ! 


2.3 HTML 5 中 常见 的 元 素 


HTML 元 素 有 很 多 ,在 不 断 的 发 展 过 程 中 , 某 些 元 素 可 能 会 被 取消 ,也 可 能 新 增 一 些 
元 素 。 本 节 对 工作 中 经 常 使 用 的 元 素 加 以 介绍 。 


、 
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2.3.1 块 级 元 素 


1. 标题 类 元 素 
标题 类 元 素 主要 有 hl、h2、h3、h4、h5 和 h6。 这 里 “h” 是 header 单词 的 第 一 个 字母 ， 
数字 1 一 6 代表 标题 的 级 别 ,hl 代表 项 级 的 标题 ,字号 最 大 ;h6 标题 级 别 最 小 ,字号 最 小 。 
【案例 2-3】 标题 类 元 素 。 
Q@ 打开 记事 本 ,并 输入 以 下 代码 。 
< !dbctype html> 
<htm> 
<head> 
<meta charset= "utf- 8"> 
<title> 标 题 类 元 素 < /title> 
< /heac> 
<body> 
<hl> 我 是 一 级 标题 < /hl> 
<h> 我 是 二 级 标题 < > 
<h3> 我 是 三 级 标题 < /h3> 
<h4> 我 是 四 级 标题 < /h4> 
<h5> 我 是 五 级 标题 < /h5> 
<h6> 我 是 六 级 标题 < /he> 
< /body> 
< /him> 
@ 执行 记事 本 菜单 栏 中 的 “文件 ”一 “另存 为 ”命令 ,在 弹出 的 对 话 框 中 输入 准备 保存 
的 网 页 文件 名 ,如 “2-3 标题 类 元 素 . html”。 x 
@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 
如 图 2-5 所 示 。 所 辣 CGDfile//E/ 编 s 交 三 
需要 说 明 的 是 ,虽然 各 级 标题 字号 大 小 不 同 , 但 可 本 一 
以 通过 CSS 规则 进行 修改 ,并 不 是 一 成 不 变 的 。 我 是 级 标题 
2. 段落 元 素 我 是 二 级 标题 
Pp 元 素 是 最 常用 的 段落 块 元 素 。 为 使 网 页 正文 文 | 我 是 三 级 标题 
字段 落 排列 更 加 整齐 ,段落 之 间 使 用 二 p 二 和 二 /p 二 标 | 我 是 四 级 标题 
签 定义 段落 ,但 并 非 所 有 内 容 都 要 放 到 二 p 二 标签 中 。 我 是 五 级 标 是 
【案例 2-4】 段落 元 素 。 
@D 打开 记事 本 ,并 在 其 中 输入 以 下 代码 。 


我 是 六 级 标题 


< !Goctype htm> 图 2-5 “标题 类 元 素 网 页 效果 
<htm> 


<head> 
<meta charset= "utf- 8"> 
<title> 段 落 元 素 < /title> 
< head> 
<body> 
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<h> 八 阵 图 < /> 


< 户 功 盖 三 分 国 ,< /E> 
< 户 名 成 八 阵 图 。< /E> 
< 户 江 流 石 不 转 ,< /E> 
< 户 遗 恨 失 知 吴 。< /> 
< 户 作 品 赏析 :作者 赞颂 了 诸葛 亮 的 丰功伟绩 ,尤其 称颂 他 在 军事 上 的 才能 和 建树 。 在 内 容 
上 ,既是 怀古 ,又 是 抒怀 , 情 中 有 情 , 言 外 有 意 , 在 绝句 中 别具一格 。< /p> 
</bodqy> 
</htm> 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 如 图 2-6 所 示 。 
@ 再 次 用 记事 本 打开 网 页 ,将 诗词 主体 代码 进行 修改 ,修改 内 容 如 下 。 


< 户 功 盖 三 分 国 ,<br/> 
名 成 八 阵 图 。<br/> 
江 流 石 不 转 ,<br/> 
遗 恨 失 知 吴 。<br/> 
< 


@ 保存 后 刷新 浏览 器 ,显示 效果 如 图 2-7 所 示 。 


口 自生 元 素 | 丫 所 车 元 素 
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八 阵 图 八 阵 图 


功 盖 三 分 国 ， 功 盖 三 分 国 ， 
名 成 八 阵 图 。 
名 成 八 阵 图 。 江 流 石 不 转 ， 
遗 恨 失 知 吴 。 


并 流 厂 不 转 ， 
Se 作品 江 析 ， 作 者 千代 了 庄 和 的 让 功 
ee 和， 
合 . 

作品 贫 析 ， 作 者 蕉 虎 了 庄 划 亮 的 在 功 避 
伟 状 万 其 称 关 他 在 主事 上 的 才能 和 i 
建 内 入 内 容 上 ， 隐 是 怀 二 ， 久 晤 

怀 ， 东 中 有 各 ， 寺 外 青草， 在 统 有 中 
a 


图 2-6 段落 元 素 p 网 页 效果 图 2-7 修改 后 的 网 页 效果 


从 本 例 预览 的 不 同 效果 可 以 看 出 ,p 元 素 是 段落 元 素 ,使 用 该 标签 分 割 诗词 内 容 时 会 
产生 较 大 的 行距 ,这 是 因为 浏览 器 将 诗词 的 每 行当 作 有 段落 处 理 , 而 段落 本 身 存在 段 前 、 段 
后 距离 ,所 以 显示 较 大 行距 ,而 增加 二 br/ 二 标签 后 行 间 距 恢 复 正 常 ,间接 说 明 换行 符 
二 br/ 二 标签 的 作用 。 


2.3.2 内 联 元 素 
之 前 已 经 介绍 过 ,内 联 元 素 与 块 元 素 最 大 的 区 别 在 于 其 前 后 的 元 素 能 够 保持 在 同一 


一 
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行 之 中 。 在 实际 工作 中 ,常见 的 内 联 元 素 有 img( 图 像 ) 元 素 .a( 超 链接 ) 元 素 和 span( 通 用 
行 ) 元 素 等 。 

1. img 元 素 

img 元 素 可 以 向 网 页 中 嵌入 一 幅 图 像 ， 二 img 二 标签 创建 的 是 被 引用 图 像 的 占 位 空 
间 。 到 img 之 标签 除了 可 以 包含 HTML 的 通用 属性 以 外 ,还 必须 包含 两 个 属性 : src 属性 
和 alt 属性 。 

【案例 2-5】 imsg 元 素 。 

Oz 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 

<body> 

< ing src= "2- 5.png" width= "205" height= "205" alt= "HIML 5" title= "HIML 5"> 

< /body> 

@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 ， 
如 图 2-8 所 示 。 € 户 CG IDfile/W/E/ 编 s 妆 | 三 


网 本 例 中 需要 掌握 src 属性 .alt 属性 和 title 属性 的 HTML 
合 奖 。 
(1) src 属性 


src 属性 用 于 指明 图 像 文件 所 在 的 位 置 , 它 的 值 是 
图 像 文 件 的 URL, 也 就 是 引用 该 图 像 的 文件 的 绝对 路 
径 或 相对 路 径 。 

(2) alt 属性 

alt 属性 用 于 指定 在 图 像 无 法 显示 时 的 替代 文本 。 图 2.8 img 元 素 网 页 效果 
这 里 建议 在 网 页 制作 时 为 每 个 图 像 添加 该 属性 ,这 样 
即使 图 像 无 法 显示 ,用 户 还 可 以 看 到 未 显示 的 图 像 信息 。 此 外 , 当 用 户 将 鼠标 指针 移动 到 
该 图 像 上 方 时 ,浏览 器 同样 会 在 一 个 文本 框 中 显示 这 个 描述 性 文本 。 

(3) title 属性 

title 属性 用 于 规定 元 素 的 额外 信息 。 某 些 浏 览 器 对 alt 属性 并 不 支持 , 当 出 现 此 种 
情况 时 ,需要 使 用 title 属性 代替 alt 属性 实现 同样 的 效果 。 


2. a 元 素 
通过 二 a 二 标签 的 href 属性 可 以 在 网 页 中 定义 链接 ,主要 分 为 普通 网 页 链接 .电子 邮 
件 链接 和 锚 点 链接 。 


【案例 2-6】 a 元 素 。 
@D 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 


<body> 
<E><ahre 伍 "/index.html"> 单 击 这 里 < /a> 将 指向 本 网 站 中 的 一 个 页 面 的 链接 < /p> 
<p> <a href= "mailto:wuyuze@ 126.comt> 单 击 这 里 </a> 将 打开 默认 的 Outlook Express< /p> 
<E><ahreE- "https://www-alipay.auy 必 单 击 这 里 </a> 将 打开 互联 网 上 的 某 个 页 面 < 人 > 
<E><ahre 会 啡 bottam> 单 击 这 里 < /a> 将 指向 本 页 面 中 的 一 个 锚 点 链接 < /p> 
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<E><a name= "bottam id "bottam></a> 这 里 设置 了 一 个 名 为 bottam 的 锚 点 < /p> 


</bodqy> 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ， 冲 5 元 素 
显示 效果 如 图 2-9 所 示 , 读 者 可 以 单 击 其 中 的 ‖ 和 言 C 口 fle///E/ 编 号 书籍 汇总 /2 交 三 
链接 加 以 测试 。 单 击 这 里 将 指向 本 网 站 中 的 一 个 页 面 的 链接 
本 例 中 所 包含 的 多 种 链接 的 含义 如 下 。 单 击 这 里 将 打开 默认 的 Outlook Express 
乞 内 部 链接 : 这 种 链接 的 目标 是 本 站 点 | 单 击 这 里 将 打开 互联 网 上 的 某 个 页 面 
中 的 其 他 文档 。 利 用 这 种 链接 ,可 以 在 |‖ 单 击 这 里 将 指向 本 页 面 中 的 一 个 错 点 链接 
本 站 点 内 的 页 面 中 相互 跳 转 。 这 里 设置 了 一 个 名 为 botton 的 错 点 
避 邮件 链接 : 这 种 链接 可 以 启动 电子 邮 
件 程序 书写 邮件 ,并 发 送 到 指定 地 址 。 
避 外 部 链接 : 这 种 链接 目标 是 互联 网 中 
的 某 个 页 面 。 利 用 这 种 链接 ,可 以 跳 转 到 其 他 的 网 站 上 。 
总 锚 点 链接 : 这 种 链接 的 目标 是 文档 中 的 命名 锚 记 。 利 用 这 种 链接 ,可 以 跳 转 到 当 
前 文档 或 其 他 文档 的 某 一 指定 位 置 。 
需要 说 明 的 是 ,href 属性 如 果 是 外 部 链接 , 则 网 址 前 面 必须 增加 “http://”。 另 外 , 超 
链接 的 外 观 样 式 和 颜色 均 可 以 通过 CSS 中 的 伪 类 进行 美化 ,后 续 章 节 将 会 详细 讲解 。 


3. span 元 素 

span 元 素 经 常 被 用 于 网 页 的 文字 格式 排版 中 ,该 元 素 没 有 固定 的 格式 表现 ,只 有 对 
它 应 用 样式 , 它 才 会 产生 视觉 上 的 变化 。 

【案例 2-7】 span 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,代码 如 下 。 


< !dbctype html> 
<htm> 
<head> 
<meta charset= "utf- 8"> 
<title> span 元 素 < /title> 
< style type= "text/css"> 
ppan{ 
Color: #F00; 
font- size: 30px; 
JM* 此 处 对 pp 标签 中 的 span 标 签 定义 样式 * / 
< /style> 
< head> 
<body> 
<span> 此 处 的 文字 虽然 被 saan 标 签 包 右 ,但 没有 对 应 的 样式 ,所 以 看 起 来 与 其 他 文字 一 模 一 
样 。< /span> 
<E<sbam 注 意 :</span> 此 处 “注意 ”二 字 由 于 被 span 标 签 包 右 ,并 且 有 对 应 的 样式 , 故 呈 
现 出 红色 , 且 字 号 变 大 。< /p> 
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< /body> 
< /hm> 
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@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 如 图 2-10 所 示 。 
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此 处 的 文字 虽然 被 span 标 签 包裹 ， 但 没有 对 应 的 
样式 ， 所 以 看 起 来 与 其 他 文字 一 模 一 样 。 


注意 : 此 处 “注意 " 二 字 由 于 被 span 标 签 
人 二 现 红色， 有 字 


2-10 span 元 素 网 页 效果 


2.3.3 列表 类 元 素 


HTML 中 常见 的 列表 元 素 有 ul 元 素 ( 无 序列 表 ) .ol 元 素 ( 有 序列 表 ) .dl 元 素 ( 自 定 
义 列 表 ) 和 1 元 素 ( 列 表 项 ) 。 这 些 元 素 结合 后 面 学习 的 CSS 能 够 实现 导航 栏 新闻 列 表 
等 页 面 效 果 , 使 用 范围 非常 广泛 。 


1. ul 元 素 
无 序列 表 ul 元 素 所 包含 的 列表 项 将 以 粗 点 方式 显示 , 且 没 有 特定 的 顺序 。 在 实际 工 
作 中 ,经 常 使 用 ul 元 素 和 1 元 素 制作 导航 栏 。 
【案例 2-8〗 ul 元 素 。 
Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 
<body> 
<h3> 岂 元 素 < /3> 
<u> 
<li><ahref= 嘲 "> 我 的 主页 </a></li> 
<li><ahre 伍 嘲 吃 最 新 电影 </a></li> 
<li><ahre 伍 吃 小 说 大 全 </a></li> 
<li><a href= 啡 "> 旅游 度假 </a>< /li> 
<1i><ahre 全 啡 喧 今 日 团购 </a></Li> 
<1i><ahre 全 啡 发 品 牌 特卖 </a></li> 
</u> 
< /body> 
@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 中 元 素 
如 图 2-11 所 示 。 
从 本 例 可 以 看 出 ,浏览 器 在 对 无 序列 表 解 析 时 ,由 
于 列表 项 li 元素 的 存在 ,会 自动 添加 一 个 项 目 符号 ,并 
且 缩 进 一 定 的 距离 。 需 要 注意 的 是 ,1i 元 素 仅 能 作为 列 


表 条 目 包 含 于 无 序列 表 和 有 序列 表 之 中 ,不 能 单独 
使 用 。 图 2-11 ul 元 素 网 页 效果 
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此 外 ,默认 状态 下 列表 的 项 目 是 纵向 排列 的 ,如 果 需 要 横向 排列 形成 网 站 的 导航 栏 ， 
则 需要 使 用 CSS 的 浮动 属性 ,后 续 章 节 将 会 详细 讲解 。 

2. ol 元 素 

有 序列 表 ol 元 素 同 无 序列 表 类 似 , 只 不 过 所 包含 的 列表 项 将 以 数字 顺序 方式 显示 。 

【案例 2-9】 ol 元 素 。 

Qa 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 


<body> 
<h3> dl 元 素 < /h3> 
<U> 
<1li> 网 络 类 
<ol> 
<Ji>《 网 页 设计 与 制作 )< /1i> 
<1i>《 网 络 工程 < /1i> 
</ol> 
< Ai> 
<1i> 多 媒体 类 
<ol> 
< li>《 Tllustrator CS6 设 计 与 制作 》< /1i> 
< 1i>《 Photoshop CS6 图 像 处 理 技术 》< /1i> 
</cl> 
< Ai> 
</a> 六 o 元 素 
<oam> 人 访 G 口 102/2-9%20o| 元 素 html 安 | 三 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 , 显 
示 效 果 如 图 2-12 所 示 。 。 网络 类 

本 例 中 使 用 了 列表 的 相互 嵌 套 ,ol 元 素 被 站 > 
嵌 套 在 ul 元 素 的 某 个 列表 项 中 。 此 外 ,ol 元 素 。 多 媒体 类 本 
内 的 列表 项 自动 从 1 开始 对 有 序 条 目 进行 纺 er 
号 ,而 不 是 项 目 符号 。 

3. dl 元 素 图 2-12 ol 元 素 网 页 效果 

自 定义 列表 不 仅仅 是 一 列 项 目 , 而 且 是 项 
目 及 其 注释 的 组 合 。 自 定义 列表 以 二 dl 二 标签 开始 ,其 中 每 个 自 定义 列表 项 以 二 dt 二 开 
始 , 每 个 注释 以 二 dd 二 开始 。 

【案例 2-10】 dl 元素。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 

<body> 

<ha> 呈 元素 < /hb3> 

<dl> 

<dt> 无 序列 表 < /at> 


< 二 无 序列 表 是 一 个 项 目的 列表 ,此 列 项 目 使 用 粗 体 圆 点 典型 的 小 黑 圆圈 ) 进 行 标记 。< /at 
<dt> 有 序列 表 < /at> 


ol 元 素 
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<d 史 有 序列 表 也 是 一 列 项 目 ,列表 项 目 使 用 数字 进行 标记 。< /az 
<dt> 自 定义 列表 </d> 
<dt 自 定义 列表 不 仅仅 是 一 列 项 目 , 还 是 项 目 及 其 注释 的 组 合 。< /az 
</dl> 
< /body> 
@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 
如 图 2-13 所 示 。 
本 例 中 ,在 二 dl 二 、 二 dt 和 二 dd 之 三 个 标签 组 合 | 纪元 素 


， 示 题 ， 容 ， 无 序列 表 
中 ,二 dt 二 是 标题 达 9 之 是 内 容 去 dl 二 可 以 看 作 承 里. 未 趾 一个 项 目的 列表 此 
载 它 们 的 容器 , 当 出 现 很 多 组 的 时 候 尽量 使 用 一 个 玉昌 人 闪 可 条 加 点 ( 开 型 的 小 

一 四 加 图 过: Nic。 
一 dt 标签 配合 一 个 一 dd > 标签 的 方法 。 如 果 | Fr 鞭 。 
有 序列 表 也 是 一 列 项 目 ， 列 表 项 
目 使 用 数字 进行 标记 。 
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<dd> 标 答 中 内 容 和 多 ,可 以 让 大 <p> 标 答 使 用 。 。 |。 
定义 列 
2.3.4 表格 类 元 素 如 二 


HTML 中 常见 的 表格 元 素 有 table( 表 格 ) 元 素 、 
tr( 表 格 行 ) 元 素 、th( 表 头 ) 元 素 和 td( 单 元 格 ) 元 素 , 这 
些 元 素 组 成 了 表格 的 基本 结构 。 

可 以 将 其 他 元 素 放 入 表格 中 ,如 图 像 、 表 单 , 其 至 另 一 个 表格 。“ 表 格 "在 页 面 中 的 作 
用 仅 是 数据 存储 ,并 且 让 数据 看 起 来 更 有 条 理 , 不 再 承担 页 面 布 局 的 任务 。 

【案例 2-11】 表格 类 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 如 下 。 


<body> 
< table width= "300" border= "1"> 
<caption> 
华为 荣耀 刷机 RM 下 载 列表 
</caption> 
<tr> 
<th scope= "col> 序 号 < /th> 
<th scope= "col"> 适 用 机 型 < /th> 
<th scope= "col> 下 载 < /th> 
</tr> 
<tr> 
<t 中 1l< /t 中 
<t 中 荣耀 联通 版 < /to> 
<to><ahre 伍 嘲 吃 下 载 </a></to> 
</tr> 
<tr> 
<t 中 x /t 中 
<t 中 荣耀 六 移动 版 < /td> 
<to><ahre 仁 嘲 吃 下 载 </a></to> 
</tr> 
< /table> 
< /body> 


图 2-13 dl 元 素 网 页 效果 
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@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 


效果 如 图 2-14 所 示 。 全 之 C | 口 %20 表 格 类 元 素 ,html 交 | 三 
本 例 中 ,除了 组 建 表格 的 基本 元 素 外 还 有 其 华为 荣耀 刷机 RON 下 载 列表 
二 适用 机 型 下 载 
他 元 素 和 属性 。 发 有 生生 上 二 
(1) border 属性 。border 属性 用 于 规定 表 际 泪 3: 移 动 版 区 载 


格 边框 的 宽度 ,该 属性 是 可 选 属性 ,默认 情况 
下 是 没有 边框 的 。 本 例 中 border 属性 设置 为 图 2-14 表格 类 元 素 网 页 效果 
10, 表 示 在 整个 表格 外 环绕 10 像素 宽度 的 
边框 。 

(2) caption 元 素 。caption 元 素 用 于 定义 表格 的 标题 。 志 caption 二 标签 必须 紧 随 
到 table> 标 签 之 后 , 且 只 能 对 每 个 表格 定义 一 个 标题 。 

(3) scope 属性 。scope 属性 可 以 将 数据 单元 格 与 表 头 单元 格 联系 起 来 。 指 定 属性 值 
为 "row" 时 ,会 将 当前 行 的 所 有 单元 格 和 表 头 单元 格 联系 起 来 ;指定 属性 值 为 "col" 时 ,会 
将 当前 列 的 所 有 单元 格 和 表 头 单元 格 绑 定 起 来 。 


2.3.5 表单 类 元 素 


表单 元 素 form 能 够 收集 用 户 输入 的 信息 ,然后 将 这 些 信 息 传 送 到 它 的 action 属性 所 
表示 的 程序 中 进行 处 理 , 最 后 生成 个 性 化 的 回应 ,在 电子 商务 网 站 应 用 方面 ,表单 具有 无 
限 的 潜能 。 

除了 传统 的 二 input type 一 "button" 二 (普通 按钮 )` 一 input type 一 "checkbox" 二 ( 复 
选 框 ) .一 input type 一 "text" 二 (单行 文本 框 )` 一 input type 一 "password" 二 (密码 输入 框 ) 
和 过 input type 一 "submit" 二 (提交 按钮 ) 外 ,还 有 一 input type 一 "email" 之 电子 邮件 输入 
域 ` 一 input type 一 "tel" 之 电话 号 码 输入 域 . 一 input type 一 "range" 之 滑 块 和 王 input type 一 
"date" 二 日 期 选择 域 等 。 在 HTML 5 中 新 增 了 几 种 输入 类 型 ,开发 者 可 以 更 为 精确 地 描 
述 用 户 输入 数据 的 类 型 。 浏 览 器 能 够 基于 这 些 新 的 表单 域 类 型 为 用 户 泻 染 出 效果 更 好 的 
控件 ,而 且 这 个 过 程 不 需要 编写 任何 JavaScript 代码 。 

下 面 来 制作 一 个 简单 的 例子 ,对 表单 中 的 一 些 常 见 的 标签 进行 讲解 ,看 一 看 表单 是 如 
何 整合 在 一 起 的 。 

【案例 2-12】 表单 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 片段 代码 如 下 。 

<body> 

<h2> 用 户 注册 < /> 

<fomigd-™Wwf l" method- "post" action="/exanple/form action 1.asp"> 

<div 

<]abel for= "usename"> 姓 名 :< /label> 

< irput type= "test" nare= "Usenane" id senaren size= "a" mavengthe "40"/> 
< /div> 
<div> 
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<label for="password"> 密 码 :</label> 


<input type="password" name="password" id="password" size="20" 


maxlength="40"/> 
</div> 


<div> 人 性别 : 


<input type="radio" name="sex" value="M" id="male" /> 


<label for="male"> 男 </label> 


<input type="radio" name="sex" value="F" id="female" /> 


<label for="female"> 女 </label> 
</div> 


<div> 学 历 : 


<select name="degree" id="degree"> 


<option value="college"> 大 专 </option> 


<option value="undergraduate"> 本 科 < /option> 
<option value= "master"> 硕 十 研究生 < /option> 
<option value="Dr"> 博 士 研究 生 < /option> 


</select> 
</div> 
</form> 


此 处 <form> 标 签 中 没有 内 容 


<form id="wf 2" method="post" action="/example/form action 2.asp"></form> 


<div> 备 注 ， 


<textarea form="wf 2" name="note" cols="30" rows="5"></textarea> 
</div> 


新 增 的 form 属 性 


<div> 


<input form="wf 2" type="submit" name="button 1" id="button 1" value=" 提 交 " /> 


</div> 

</body> 

@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 
效果 如 图 2-15 所 示 。 本 例 中 需要 掌握 的 知识 点 有 
以 下 几 个 方面 。 


1. 二 form 二 标签 

一 form 标 签 用 于 为 用 户 输入 创建 HTML 
表单 。 在 文档 主体 中 ,表单 可 以 被 放置 于 任何 
位 置 。 

(1) form 属性 

form 属性 是 HTML 5 的 新 增 属性 。 在 HTML 
4.01 中 表单 内 的 从 属 元 素 必须 书写 在 二 form 与 
去 /form> 之 间 , 但 在 HTML 5 中 ,可 以 把 它们 书写 
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用 户 注册 
姓名 | 


密码 ， 
性 别 ， 


图 2-15 表单 元 素 预 览 效 果 


在 任何 地 方 , 只 需 为 该 元 素 指定 form 属性 ,属性 值 与 该 表单 的 id 属性 值 相对 应 即 可 。 

例如 ,一 form id 二 "wf_2" method 一 "post” action 一 "/example/form_action_2. asp" 过 
二 /form 放 中 并 没有 任何 从 属 元 素 , 但 是 其 外 部 有 二 textarea form 一 "wf_2" name 一 
"note" cols 一 "30" rows 一 "5" 记 过 /textarea 记 ,这 就 说 明 该 textarea 元 素 从 属 wf_2 


表单 。 
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(2) action 属性 

action 属性 说 明了 接收 和 处 理 表单 数据 的 应 用 程序 的 URL。 本 例 中 action 属性 值 
为 "/example/form_action_1. asp" ,这 表示 该 表单 提交 后 ,将 调用 form_action_1. asp 程序 
进行 处 理 。 

(3) method 属性 

method 属性 用 于 规定 使 用 何 种 方法 发 送 表 单数 据 , 共 有 POST 和 GET 两 种 方法 。 

(4) label 元 素 

label 元 素 的 作用 是 , 当 用 户 选择 该 标签 时 ,浏览 器 就 会 自动 将 焦点 转 到 和 标签 相关 
的 表单 控件 上 。 例 如 ,在 网 页 中 单 击 “ 姓 名 ”, 光 标 就 会 自动 在 其 右 侧 文本 框 中 定位 ,这 是 
因为 label 元 素 内 的 for 二 "usename" 与 input 元 素 内 的 id 二 "usename" 相 对 应 。 

(5) select 元 素 

select 元 素 用 于 创建 下 拉 菜单 或 滚动 列表 。 与 其 他 标签 一 样 ,name 属性 是 必须 存在 
的 。 当 提交 表单 时 ,浏览 器 会 提交 选 定 的 项 目 , 或 者 收集 用 逗号 分 隔 的 多 个 选项 ,将 其 合 
成 一 个 单独 的 参数 列表 。 

(6) option 元 素 

可 以 定义 一 个 二 select 二 表单 控件 中 的 条 目 。 浏 览 器 将 二 option 二 标签 中 的 内 容 作 
为 二 select 二 标签 的 菜单 或 是 深 动 列表 中 的 一 个 元 素 进行 显示 。 


2. 二 input 一 标签 

二 input 记 标签 用 于 定义 表单 控件 ,根据 其 不 同 type 的 属性 值 , 输 入 的 字段 可 以 拥有 
很 多 种 形式 。 在 HTML 5 中 ,input 元 素 的 种 类 有 了 大 幅度 改良 ,可 以 实现 之 前 那些 需要 
使 用 JavaScript 才能 实现 的 功能 。 

对 于 每 个 元 素来 说 ,只 有 type 和 name 属性 是 必需 的 ,二 input 二 标签 中 type 属性 用 
来 选择 控件 类 型 ,name 属性 用 来 为 字段 命名 。 以 下 是 type 属性 常见 值 的 含义 。 

(1) type 二 "text"( 单 行文 本 输入 框 ) 

文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ,通常 用 来 填写 用 户 名 以 及 简单 的 
回答 ,如 图 2-16 所 示 。 

(2) type 一 "password" (密码 输入 框 ) 

当 用 户 在 此 类 型 的 输入 框 中 输入 任何 文字 时 ,文字 会 被 ”。 ”代替 ,从 而 起 到 保密 的 作 
用 ,如 图 2-17 所 示 。 
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这 里 可 以 输入 文字 ! 


R 


图 2-16 单行 文本 输入 框 图 2-17 密码 输入 框 


人、 


一 
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(3) type 一 "checkbox"( 复 选 框 ) 

复 选 框 控 件 为 用 户 提供 了 一 种 在 表单 中 选择 或 取消 选择 某 个 条 目的 快捷 方法 。 复 选 
框 可 以 集中 在 一 起 产生 一 组 选择 ,用 户 可 以 选择 或 取消 选择 组 中 的 每 个 选项 ,如 图 2-18 
所 示 。 

(4) type 一 "radio"( 单 选 按钮 ) 

单 选 按钮 表单 控件 与 复 选 框 的 行为 非常 相似 ,唯一 不 同 的 是 浏览 者 在 待 选 项 中 只 能 
选择 其 中 一 个 ,如 图 2-19 所 示 。 
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国 园 加 


单 选 按钮 


R 园 单 选 按钮 
R 


图 2-18 复 选 框 图 2-19 单 选 按钮 


(5) type 一 "file"( 文 件 域 ) 

文件 域 主要 用 于 文件 的 上 传 ,如 图 2-20 所 示 。 

(6) type 二 "submit" (提交 按钮 

表单 中 input 元 素 的 type 属性 可 以 定义 为 提交 按钮 (submit) ,并 且 允 许 一 个 表单 中 
包含 多 个 提交 按钮 , 它 的 作用 就 是 把 表单 数据 发 送 到 服务 器 ,如 图 2-21 所 示 。 
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图 2-20 文件 域 图 2-21 提交 按钮 


对 于 最 简单 的 提交 按钮 (按钮 不 包含 name 属性 或 value 属性 ) ,浏览 器 将 显示 一 个 长 
方形 按钮 ,上 面 有 默认 标记 “submit( 提 交 )”。 其 他 情况 下 ,浏览 器 会 在 value 属性 中 设置 
的 文本 来 标记 按钮 。 如 果 还 包含 name 属性 , 当 浏 览 器 将 表单 信息 发 送 给 服务 器 时 ,会 
提交 按钮 的 value 属性 值 添加 到 参数 列表 中 。 

(7) type 一 "hidden"( 隐 藏 字段 ) 

隐藏 字段 控件 从 视觉 上 是 无 法 看 到 的 , 它 只 是 一 种 向 表单 中 嵌入 信息 的 方法 ,以 便 这 
些 信 息 不 会 被 浏览 器 忽略 。 虽 然 该 控件 不 会 显示 出 来 ,但 通过 查看 源 代码 还 是 可 以 看 到 
该 属性 的 值 ,因此 不 要 使 用 该 元 素 传递 敏感 信息 ,例如 密码 。 

(8) type 二 "date"( 日 期 控件 ) 

日 期 控件 可 以 帮助 用 户 快 速 输入 各 类 日 期 ,其 使 用 方法 如 下 。 
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< input namer "date" typer "date" valuer "2015_ 05- 17"> 

这 里 可 以 通过 value 属性 设置 日 期 控件 的 默认 起 始 日 期 ,预览 效果 如 图 2-22 所 示 。 

(9) type 一 "range"( 滑 块 控 件 ) 

滑 块 控件 可 以 方便 用 户 快速 且 直 观 地 增 减 数值 ,其 使 用 方法 如 下 。 

< input name= "rangen type= "range” minr "5" max- "30" value= "5"> 

这 里 min 王 "5" 是 最 小 值 ,max 王 "30" 是 最 大 值 ,value 王 "5" 是 初始 值 为 5, 预览 效果 
如 图 2-23 所 示 。 


现 惠 /06/17 xi 


2015 年 05 月 ~ 


所 CDfile//E/ 编 s 空 | 三 


人 


周 日 周 - 周二 周 = 


3 4 5 6 
10 11 12 13 


下 19 
24 恰 25 26 


31 


图 2-22 日 期 控件 图 2-23 滑 块 控件 


(10) type 一 "color"( 颜 色 选 择 器 控件 ) 
颜色 选择 器 控件 可 以 帮助 用 户 选择 某 种 颜色 ,其 使 用 方法 如 下 。 


< input name= "color" type= "color"> 
预览 时 , 当 用 户 单 击 该 控件 时 ,会 弹出 颜色 选择 器 ,如 图 2-24 所 示 。 


LN 


色调 中 : 40 红 加 ): 

饱和 度 G@): 240 绿 (@): 255 

规定 自 定义 颜色 加) > 颜色 | 纯色 襄 度 Q): 180 蓝 D: 128 
有 添加 到 自 定义 颜色 &) 


< 户 C Dfiley//E:/ 编 s 窜 | 三 


图 2-24 颜色 选择 器 控件 
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3. 一 label 二 标签 
二 label 二 标签 用 于 为 input 元 素 定 义 标 签 。 虽 然 label 元 素 不 会 向 用 户 呈 现任 何 特 


外 ,二 label 二 标签 的 for 属性 应 当 与 相关 元 素 的 id 属性 相同 。 


4. 二 select 二 标签 

所 select 一 标签 用 于 创建 下 拉 菜 单 或 滚动 列表 。 与 其 他 标签 一 样 ,name 属性 是 必须 
存在 的 。 当 提交 表单 时 ,浏览 器 会 提交 选 定 的 项 目 , 或 者 收集 用 逗号 分 隔 的 多 个 选项 ,将 
其 合成 一 个 单独 的 参数 列表 。 此 外 ,用 户 如 果 和 希望 一 次 选择 多 个 选项 ,可 以 在 二 select 二 
标签 中 添加 multiple 属性 。 


5. 一 option 二 标签 

王 option 之 标签 可 以 定义 一 个 二 select 二 表单 控件 中 的 每 个 条 目 。 浏 览 器 将 二 option 
标签 中 的 内 容 作为 二 select 二 标签 的 菜单 或 是 滚动 列表 中 的 一 个 元 素 进行 显示 。 

(1) value 属性 

value 属性 可 以 为 每 个 选项 设置 一 个 值 , 当 表单 被 提交 时 这 个 值 将 被 发 送 到 服务 器 
端 。 如 果 没 有 指定 value 属性 ,选项 的 值 将 设置 为 二 option 二 标签 中 的 内 容 。 

(2) selected 属性 

默认 设置 下 ,所 有 多 选 的 二 select 二 标签 中 选项 都 是 未 选中 状态 。 当 二 select 二 标 
签 中 包含 selected 属性 后 ,就 可 以 实现 一 个 或 多 个 选项 在 初始 状态 时 就 处 于 被 选中 


2.3.6 多 媒体 类 元 素 


HTML 5 之 前 ,在 网 页 中 展示 的 视频 动画 和 音频 等 多 媒体 素材 ,一 般 使 用 第 三 方 开 
发 的 播放 器 或 者 使 用 Flash 进行 展示 ,但 这 种 方法 需要 在 浏览 器 中 安装 各 种 插件 才能 完 
成 。 自 从 HTML 5 出 现 后 这 种 局 面 得 到 一 定 的 改观 ,目前 HTML 5 提供 统一 的 视频 和 
音频 接口 ,浏览 器 自身 就 可 以 播放 这 些 多 媒体 素材 ,不 再 需要 安装 插件 。 本 节 介 绍 
HTML 5 中 新 增 的 两 个 元 素 一 一 video 元 素 和 audio 元 素 。 


1. video 元 素 

HTML 5 中 的 video 元 素 . 改 善 了 用 户 的 Web 体验 ,能 让 用 户 轻松 愉快 地 观看 视频 。 
目前 ,video 元 素 支持 的 视频 格式 有 三 种 : Ogg( 带 有 Theora 视频 编码 和 Vorbis 音频 编码 
的 Ogg 文件 ) 格 式 ;MPEG 4( 带 有 H. 264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 ) 格 
式 ;WebM( 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 ) 格 式 。 

【案例 2-13】 video 元 素 。 

O@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,完整 的 代码 如 下 。 

< !doctype html> 

<hbm> 


<head> 
<meta charset= "utf- 8"> 
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<title>video 元 素 < /title> 


< [head> 


<bodqy> 

<Video width= "320" height= "240" controls> 

< source src= "video wf.0ogg" type= "video/ogg> 

对 不 起 ! 您 的 浏览 器 不 支持 video 标 签 。< /video> 
</bodqy> 
</htm> 


@ 保存 为 网 页 文件 后 通过 不 同 的 浏览 器 解析 ,显示 效果 如 图 2-25 和 图 2-26 所 示 。 


要 F:\ch02-13- 视 频 元 素 -htal - Windovs In..- 攻 |] 癌 | 民 | 
文件 EE) 编辑 人 E) 查看 WV) 收 高) 工具 I) 帮助 0 [3 
@e- © - 国 日 作 Por wax 

地 址 0) | 和 F:\choz-13- 视 频 元 素 am 疾 加 辐 | 
链接 


1 video 元 素 


CG 口 13%20video 元 素 .html 交 


对 不 起 ! 您 的 浏览 器 不 支持 video 标 签 。 


二 二 局 
018 可 ee 团 


图 2-25 ”Chrome 浏览 器 预览 video 图 2-26 低 版 本 IE 浏览 器 预览 video 
元 素 时 效果 元 素 时 效果 


本 例 中 ,controls 提供 了 播放 、 和 暂停 和 音量 控件 ,方便 用 户 对 视频 进行 控制 ;width 属 
性 和 height 属性 定义 了 视频 显示 的 范围 ;二 video 二 标签 中 的 文字 内 容 用 于 在 不 支持 
video 元 素 的 浏览 器 中 显示 提示 信息 。 


2. audio 元 素 
audio 元 素 能 够 播放 声音 文件 或 者 音频 流 , 其 使 用 方法 与 video 元 素 类 似 。audio 元 
素 支 持 三 种 音频 格式 , 即 Ogg Vorbis、MP3 和 WAV 格式 。 
【案例 2-14】 audio 元 素 。 
@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,完整 的 代码 如 下 。 
< !goctype html> 
<htm> 
<head> 
<meta charset= "utf- 8"> 
<title> audio 元 素 < /title> 
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< [head> 


<body> 

<audio controls> 

< source src= "audio dx.0gg"type= "andio/ogg> 

对 不 起 ! 您 的 浏览 器 不 支持 audio 标 签 。< /audio> 
< /body> 
</htm> 


@ 保存 为 网 页 文件 后 通过 不 同 的 浏览 器 解析 ,显示 效果 如 图 2-27 和 图 2-28 所 示 。 


马 HTI0L5 音 频 标签 audio - Windows Internet... 此 | 器 | 区 | 
文件 四” 编辑 四 查看 WW) 收 永和 ) 工具 ) 帮助 加 局 


-日 ,- 国 国 约 时 兴 mx 
地 址 男 ) | 。 F: \choz\eh0z-14-htnl5 音 频 元 素 .htal 站 加 条 
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对 不 起 ! 您 的 浏览 器 不 支持 audio 标 签 。 


四 audio 元 素 


和 了 CD file:///E:/ 编 写 书籍 入 | 三 


图 2-27 Chrome 浏览 器 预览 audio 元 素 时 效果 ”图 2-28 低 版 本 IE 浏览 器 预览 audio 元 素 时 效果 


2.3.7 HTML 5 新 增 的 结构 类 元 素 


在 HTML 5 中 ,为 了 使 文档 层次 更 加 清晰 ,新 增 了 几 个 与 页 眉 .内容 区 块 和 页 脚 等 文 
档 结构 相关 的 结构 元 素 。 下 面 依托 一 个 简单 的 实例 向 读者 讲解 结构 类 元 素 的 具体 含义 。 

【案例 2-15】 HTML 5 结构 类 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,完整 的 代码 如 下 。 


< !doctype html> 
<htm> 
<head> 

<meta charset= "utf- 8"> 

<title> HIML 5 结构 类 元 素 < /title> 
< head 


<body> 
< header id- "page header> 
<hl> 这 里 是 网 页 内 容 的 区 块 标题 < /hl> 
<nav> 
<uUl> 


<1]i><ahre 合 啡 图 导航 1 /a></li> 

<1i><ahre 合 啡 图 导航 Xx/a></li> 

<li><ahref 伍 哮 心 导航 了 /az></li> 
</a> 


<header ic "post_ header> 
<h2> 这 里 是 文章 的 标题 < /h2> 
< 户 文 章 作 者 
< time datetime= "2015- 05- 17"> 发 布 时 间 < /time> 
< 他 
< /header> 
<aside> 
< 本 当前 文章 的 附属 信息 < /p> 
< /aside> 
< footer> 
<E> 区 块 内 容 的 脚注 < /p> 
< /footer> 


< footer id- "page footer"> 
<p> goopy; 2015 宇 泽 互联 < /p> 
< /footer> 
< /body> 
< /htm> 
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@ 上 述 代码 由 于 没有 添加 CSS 内 容 , 所 以 使 用 浏览 器 预览 时 各 种 结构 显示 的 并 不 明 
确 , 这 里 给 出 上 述 代 码 的 结构 示意 图 ,如 图 2-29 所 示 。 通 过 上 述 代码 结构 分 析 , 需 要 学 习 


以 下 内 容 。 


section 


article 


header 


aside 


footer 


footer 


图 2-29 结构 示意 图 
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1. header 元 素 

header 元 素 用 于 定义 文档 的 页 眉 , 是 一 种 具有 引导 作用 的 结构 元 素 ,一 般 用 来 放置 
整个 页 面 或 某 个 区 块 的 标题 。 需 要 说 明 的 是 ,HTML 5 并 未 限制 使 用 header 元 素 的 个 
数 ,例如 本 例 中 为 整个 页 面 头 部 定义 了 id 一 "page_header" 的 header 元 素 , 也 为 文章 内 容 
的 标题 部 分 定义 了 id 二 "post_header" 的 header 元 素 。 


2. nav 元 素 
nav 元 素 用 于 定义 导航 链接 的 部 分 ,一 个 页 面 可 以 包含 多 个 nav 元 素 ,作为 页 面 整体 
或 者 不 同 部 分 的 导航 。 


3。 section 元 素 
section 元 素 用 于 对 网 站 中 的 内 容 进行 分 块 , 当 需 要 描述 页 面 逻辑 区 域 时 ,可 以 使 用 
section 元 素 代替 之 前 滥用 的 div 标签 。 


4. article 元 素 

article 元 素 用 于 定义 独立 的 .完整 的 .可 以 单独 被 外 部 引用 的 内 容 。 该 元 素 所 包含 的 
内 容 可 以 是 一 篇 文章 ,一 段 独立 的 用 户 评论 或 者 一 篇 独立 的 论坛 帖子 。 

article 元 素 通常 拥有 它 自己 的 标题 (该 标题 一 般 使 用 header 元 素 进 行 包 庄 ), 有 时 还 
有 自己 的 脚注 (该 脚注 一 般 使 用 aside 元 素 进行 包 衷 ) 。 

注意 : 在 HTML 5 中 section 元 素 与 article 元 素 的 侧重 点 不 同 ,section 元 素 强 调 的 
是 分 块 ,而 article 元 素 强调 的 是 独立 性 。 例 如 ,section 元 素 就 像 报纸 中 的 娱乐 版 和 体育 
版 ,而 article 元 素 就 像 某 个 版 块 中 的 一 篇 文章 。 

section 元 素 有 以 下 几 点 禁忌 。 

(1) 不 要 将 没有 标题 的 内 容 区 块 使 用 section 元 素 。 

(2) 不 要 将 section 元 素 用 作 设置 页 面 的 容器 ,请 使 用 div 元 素 。 

(3) 如 果 article 元 素 更 符合 使 用 条 件 , 尽 量 不 要 使 用 section 元 素 。 

5. aside 元 素 

aside 元 素 用 来 表示 当前 文章 的 附属 信息 , 它 可 以 包含 与 当前 页 面相 关 的 引用 、 侧 边 
栏 .导航 条 ,以 及 其 他 有 别 于 主要 内 容 的 部 分 。 

当 aside 元 素 被 包含 在 article 元 素 内 部 时 ,主要 作用 是 当前 文章 的 附属 信息 ; 当 aside 
元 素 处 在 article 元 素 外 部 时 ,主要 作用 是 站 点 的 全 局 附属 信息 ,如 友情 链接 、 其 他 文章 列 
表 和 广告 列表 等 。 


6.footer 元 素 
footer 元 素 通常 包括 其 相关 的 区 块 信息 ,如 相关 阅读 链接 和 版 权 等 ,设计 者 可 以 在 文 
档 的 多 个 地 方 使 用 多 个 footer 元 素 。 


2.4 ”过程 指 导 一 一 HTML 5 元 素 的 简单 运用 


HTML 5 所 包含 的 元 素 众多 ,在 学 习 初 期 建议 读者 循序 渐进 地 记忆 各 种 标签 的 含 
义 。 本 节 在 之 前 学 习 的 基础 上 使 用 记事 本 创建 一 个 简单 的 网 页 ,其 目的 是 通过 该 环节 的 
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练习 加 强 对 某 些 元 素 的 认识 。 具 体 实 现 过 程 如 下 。 
(1) 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,代码 如 下 。 


< !doctype html> 
<htm> 
<head> 

<meta charset= "utf- 8"™> 

<title> HIML 5 元 素 的 简单 运用 < /title> 
</heaq> 


<body> 
<header> < img src= "html 510go.png" width= "220" height= "220"> < /header> 
<article> 
<header> 
<h2> HIML 5 发 展 前 景 < /h2> 
< 户 作 者 : 宇 泽 互联 snbsp;grbsp; 发 布 日 期 : 
< time datetime= "2015- 05- 17"> 2015- 05- 17< /time> 
< 人/ 从 
< /header> 
<hr/> 
<P> "HIML 5 是 开放 的 Web 网 络 平台 的 葛 基 石 。HIML 5 以 及 Javascript 和 Css 相关 技术 能 够 让 开 
发 者 在 任何 设备 上 都 运行 开发 丰富 的 网 页 应 用 ,并 且 会 有 越 来 越 多 的 企业 加 入 到 HML 5 
的 大 平台 上 来 。< /p> 
<h3> HIML 5 的 特点 < /h3> 
<E>HML 5 有 两 大 特点 :首先 ,强化 了 Web 网 页 的 表现 性 能 。 其 次 ,追加 了 本 地 数据 库 等 Web 应 
用 的 功能 。 广 义 论 及 HIML 5 时 ,实际 指 的 是 包括 BIML、CsSS 和 Javascript 在 内 的 一 套 技术 组 
合 。 它 希望 能 够 减少 浏览 器 对 于 需要 插件 的 网 络 应 用 服务 (RIA), 如 MGobe Flash、 Microsoft 
Silverlight 与 Oracle JavaFX 的 需求 ,并 且 提 供 更 多 能 有 效 增强 网 络 应 用 的 标准 集 。< /p> 
<uUl> 
<1i> 支 持 视频 的 播放 /录音 功能 < /1i> 
<1i> 支 持 音频 的 播放 /录音 功能 < /1i> 
<1] 这 人 允许 WEb 页 面 运行 应 用 < /1i> 
<1i> 支 持 丰富 的 2D 图 片 < /1i> 
<1i> 支 持 即 时 通信 功能 < Ai 
</al> 
</article> 
< footer> Copyright goopy; <a href= "mailto:wufengl121@ 126.cum> 宇 泽 互联 < /a> 2014- 2016,All Rights 
Reserved.< /footer> 
< /body> 
< /html> 


(2) 在 记事 本 的 菜单 栏 中 执行 “文件 >“ 保存" 命令 ,此 时 弹出 “另存 为 "对话 框 ,并 在 
“文件 名 ”文本 框 中 输入 index. html, 将 文档 进行 保存 。 

(3) 启动 浏览 器 ,预览 刚才 保存 的 文档 ,此 时 读者 会 发 现 页 面 并 不 美观 。 为 了 解决 这 
个 问题 ,需要 为 页 面 添加 部 分 CSS 规则 ,来 规范 页 面 中 的 元 素 。 将 下 面 的 代码 片段 添加 
到 记事 本 中 ,其 位 置 在 二 head 之 和 二 /head 盖 之 间 。 


< style type= "text/css"> 
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body { 

backoground: url (pg.Png) repeat; 
/* 载 人 网 页 背景 图 像 ,并 设置 为 平 铺 效果 * / 
b2 { 

text- align: oenter; 
/# 设置 b2 标 签 内 部 文字 居中 * / 
header { 

text— align: Center7 
/* 设置 header 元 素 内 的 内 容 居中 * / 
articlep { 

text- indent: 2em; 
/* 设置 文章 正文 中 段落 缩 进 2 个 汉字 的 距离 * / 
footer { 

font- size: 12pg7 

text- align: oanter; 
/设置 版 权 区 域 文字 大 小 和 居中 位 置 * / 
</style> 


(4) 再 次 保存 和 预览 ,其 效果 如 图 2-30 所 示 。 


日 HTML 5 元 素 风 简单 运用 ”> 
所 合 C 上. 清 比 网 页 设计 ( 


HTML 5 发 展 前 景 
作者 ， 宇 泽 互联 “发布 日 期 ， 2015-05-17 


HTIL 5 是 开放 的 Web 网 络 平台 的 莫 基 石 。 HT 上 .5 以 及 JavaScript 和 CSS 相 关 技术 能 驶 让 开 
人 开发 丰富 的 网 页 应 用 ， 并 且 会 有 越 未 越 多 的 企业 加 入 到 8TIL 5 的 大 平 


HTML 5 的 特点 


大 特点 ， 首 先 ， 强 化 了 Web 由 其 次 , 让 Neb 

we en 详 际 指 的 星 包括 HTL、 oe 
En 览 器 对 于 需要 揪 件 的 网 络 应 用 慑 务 〔RIA)，#0Adobe Flasn、 Microsoft 
全 verlisht 与 0racle Jovofy 的 需求 ， 生生 生生 有 主人 合计 


支持 视 二 的 播放 / 娃 音 功能 
. 、 支持 音频 的 指 让/ 妥 委 功能 
。 多 许 Wcb 页 面 运行 应 用 
。 支持 丰富 的 2 图片 
。 支持 即时 种 信 功能 
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图 2-30 HTML 5 元 素 简单 应 用 的 预览 效果 


需要 说 明 的 是 ,读者 在 制作 案例 的 过 程 中 .肯定 觉得 使 用 “记事 本 ”制作 网 页 十 分 麻烦 
和 枯燥 ,笔者 的 用 意 在 于 让 读者 熟悉 这 些 标 签 元 素 的 含义 ,至 于 工作 中 如 何 制作 网 页 ,后 
续 章节 将 结合 HTML 5 和 CSS 的 知识 重点 讲解 Dreamweaver CS6 。 
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2.5 自主 任务 一 一 使 用 记事 本 创建 简单 页 面 


根据 2.4 节 的 案例 制作 ,读者 应 该 了 解 和 掌握 文本 标记 语言 中 常见 标签 的 含义 及 使 用 
方法 。 本 节 再 次 通过 实 训 的 方式 ,进一步 加 强 各 种 标签 的 认 知 ,页 面 最 终 效果 如 图 2-31 
所 示 ,请 读者 结合 对 标签 的 理解 实现 该 页 面 。 


Er 
el 


Super-yuze 


村 汪 。rhserio 和 四。 本 生存 天 双开 突 二 人， 址 总 几 人 之 王室 折 下。 阳 三 二 0 本 全， 和 

吕 二 8)， 呈 和 时 用 4 丰富 寻 站 大林。 本 其 友 
bE " 昌 人 Theaegep 朋 发， 开 发 下 直上 1 全 
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图 2-31 最 终 效果 图 


2.6 习题 


1. HTML、XHTML 和 HTML 5 是 什么 ? 它们 之 间 有 什么 联系 ? 

2. 举例 说 明 ,什么 是 块 元 素 ? 什么 是 内 联 元 素 ? 

3. 在 HTML 5 新 增 的 结构 类 元 素 中 ,section 元 素 与 article 元 素 的 区 别 是 什么 ? 
4. header 元 素 能 否 在 页 面 中 多 次 出 现 ? 

5. 使 用 列表 元 素 制作 如 图 2-32 所 示 的 嵌 套 列表 。 


予 强 


< 会 CDfile/WE:/ 编 s 灾 | 三 


一 个 庶 枯 的 列表 : 


图 2-32 ” 肉 套 列表 


e、 


和 网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 
6. 使 用 表单 元 素 制作 “调查 问卷 ”, 如 图 2-33 所 示 。 


是 强 
Gh fo 


个 人 基金 投资 者 投资 情况 调查 问卷 

(1) 您 选择 投资 公募 基金 的 主要 原因 是 。( ) 

日 公 莫 运 作 管 理 规 范 、 信 息 氢 圳 全面， 可 以 方便 地 查找 相关 信息 ， 申 购 、 贱 回 等 均 很 便利 
日 公 站 基金 有 比较 强大 的 投 研 团队 

9 人 人 的 

(2) 您 选择 投资 专 户 一 对 多 基金 的 主要 原因 是 ，《 ) 


上 自 专 户 一 对 多 基金 管理 规范 ， 同 公募 基 金 一 样 有 比较 强大 的 投 研 团队 ， 且 投资 范围 、 投 资 比例 较 自 由 
ee 对 多 产品 相对 于 公募 基金 有 更 强 的 针对 性 ， 可 以 更 好 地 满足 投资 者 要 求 


(3) 您 希望 获得 哪 方面 的 信息 ? (多 选 题 ) 
-| 产品 设计 理念 
路 


目 投资 思 
目 基金 经 理 介 绍 
目 购买 渠道 
目 购买 费 率 


如 您 希望 获得 抽奖 机 会 ， 请 留 下 如 下 信息 : 


手机 ， | 
住址 ， | 


图 2-33 ”调查 问卷 


第 3 章 


Dreamweaver CS6 基础 与 CSS 入 门 


【本 章 导 读 】 

在 工作 中 ,常用 Adobe Dreamweaver 工具 软件 构建 网 站 和 应 用 程序 ,该 工具 提供 可 
视 化 布局 功能 ,开发 者 能 够 快速 创建 站 点 。 本 章 除了 介绍 该 款 软 件 的 使 用 方法 ,还 将 向 读 
者 详细 介绍 工作 中 必 不 可 少 的 CSS 内 容 。 

【学 习 目 标 】 

二 熟悉 Dreamweaver 的 工作 环境 ; 

二 了 解 站 点 及 其 相关 知识 ,能 够 使 用 Dreamweaver 创建 和 管理 站 点 ; 

局 掌握 CSS 的 基本 语法 ,理解 金 模型 的 内 涵 ; 

名 熟练 掌握 常用 的 CSS 选择 器 ,能 够 通过 选择 器 修改 指定 对 象 的 CSS 规则 。 


3.1 工作 环境 


Adobe Dreamweaver CS6 是 一 个 全 面 的 专业 工具 集 , 可 用 于 设计 并 部 署 极 具 吸 引力 
的 网 站 和 Web 应 用 程序 。 在 编辑 文档 的 状态 下 ,Dreamweaver CS6 的 工作 环境 如 图 3-1 
所 示 ,其 中 常用 的 区 域 含义 如 下 。 
所 文档 工具 栏 : 该 工具 栏 提供 各 种 文档 窗口 视图 ,以 及 各 种 查看 选项 和 方法 。 
避 代码 视图 : 用 于 编辑 和 查看 当前 编辑 状态 下 的 网 页 源 代码 。 
名 设计 视图 : 该 视图 用 于 可 视 化 页 面 布 局 .可视化 编辑 和 快速 应 用 程序 开发 的 设计 
环境 。 在 该 视图 中 ,Dreamweaver 显示 的 文档 内 容 类 似 于 在 浏览 器 中 查看 页 面 时 
的 效果 。 
名 属性 面板 : 用 于 查看 和 更 改 所 选 对 象 或 文本 的 各 种 属性 ,每 种 对 象 都 具有 不 同 的 
属性 ,默认 状态 下 该 面板 是 折 秋 状态。 
避 标 签 选择 器 : 用 于 显示 环绕 当前 选 定 内 容 所 在 标签 的 层次 结构 。 单 击 该 层次 结构 
中 的 任何 标签 ,可 以 选择 该 标签 及 其 全 部 内 容 。 
名 文件 面板 : 用 于 管理 当前 站 点 和 本 地 的 文件 ,类 似 于 Windows 资源 管理 器 。 
名 CSS 样式 面板 : 用 于 管理 和 编辑 选 定 对 象 的 CSS 样式 规则 。 


3.1.1 文档 和 编码 工具 栏 
Dreamweaver CS6 包含 了 四 种 工具 栏 : 样式 呈现 ,文档 、 标 准 、 编 码 。 用 户 可 以 通过 


二 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


[下 


属性 面板 标签 选择 器 
图 3-1 工作 环境 


执行 “查看 ”>“ 工 具 栏 "命令 ,打开 或 关闭 某 个 工具 栏 。 这 里 文档 和 编码 工具 栏 较 为 常用 ， 
下 面 进行 简单 介绍 。 

1. 文档 工具 栏 

使 用 文档 工具 栏 所 包含 的 按钮 可 以 在 文档 的 不 同 视图 之 间 快 速 切 换 。 工 具 栏 中 还 包 


含 一 些 与 查看 文档 、 在 本 地 和 远程 站 点 间 传 输 文档 有 关 的 常用 命令 和 选项 ,如 图 3-2 
所 示 。 


[二 了 [本]t」 网. 固 . 由 be 4 风电 ”标本 TT 胸 末 NE 用 | 


3-2 文档 工具 栏 


感到 (显示 代码 视图 ) : 单 击 该 按钮 后 ,文档 窗口 中 仅 显 示 页 面 的 代码 。 


鼎 而 |( 显 示 代 码 和 设计 视图 ): 单 击 该 按钮 后 ,将 文档 窗口 拆 分 为 代码 视图 和 设计 
视图 。 


请 淹 |( 品 示 设 计 视 图 ) : 单 击 该 按钮 后 ,文档 窗口 中 仅 显示 页 面 的 设计 界面 ,用 户 可 
以 在 此 窗口 中 对 网 页 元 素 直 接 编辑 。 

项 图 (实时 视图 ) : 显示 不 可 编辑 的 ,交互 式 的 、 基 于 浏览 器 的 文档 视图 。 

项 ( 多 屏幕 ): 可 以 使 设计 师 在 多 个 设备 屏幕 大 小 不 同 的 状态 下 预览 当前 页 面 。 

贺 |( 浏 览 器 调试 /预览 ): 在 浏览 器 中 预览 或 调试 文档 。 

区 (文件 管理 ) : 弹出 文件 管理 菜单 。 

葬 (CW3C 验证 ): 方便 设计 师 对 当前 页 面 在 线 验 证 是 否 符合 W3C 的 标准 。 

国 |( 检 查 浏 览 器 兼容 性 ): 用 于 检查 用 户 的 CSS 是 否 对 于 各 种 浏览 器 均 兼 容 。 

项 ( 可 视 化 助理 ) : 可 以 使 用 各 种 可 视 化 助理 来 设计 页 面 。 
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图 (刷新 设计 视图 ): 在 代码 视图 中 对 文档 进行 更 改 后 刷新 文档 的 设计 视图 ,可 以 使 
更 改 内 容 显示 在 设计 视图 中 。 
(文档 标题 ) : 在 此 输入 的 文字 内 容 , 将 会 作为 网 站 标题 出 现在 浏 


标题 TNL 5 元 运用 
览 器 左上 角 。 
2. 编码 工具 栏 


编码 工具 栏 垂直 显示 在 文档 窗口 的 左 侧 , 它 包含 可 用 于 执行 多 种 标准 编码 操作 的 按 


钮 ,如 图 3-3 所 示 。 


园 ( 打 开 文 档 ): 显示 当前 打开 的 文档 。 

圈 ( 显 示 代码 导航 ): 显示 代码 导航 器 。 

辆 ( 折 短 整 个 标签 ) : 折 释 一 组 标签 之 间 的 内 容 。 
较 ( 折 释 所 选 ): 折 又 所 选 代码 。 

国 (扩展 全 部 ): 还 原 所 有 折合 的 代码 。 

图 ( 选 择 父 标签 ) : 选择 当前 标签 的 父 标签 。 

较 ( 选 取 当前 代码 段 ): 选取 当前 代码 段 。 
图 ( 行 号 ) : 显示 或 隐藏 代码 的 行 号 。 

加 (高 亮 无 效 代码 ) : 用 黄色 显示 无 效 代 码 。 


国 ( 自 动 换行 ): 自动 换行 。 


国 (语法 错误 警报 ) : 启用 或 禁用 语法 错误 警报 。 
图 (应 用 注释 ): 在 所 选 代码 两 侧 添加 注释 标签 。 


贺 ( 删 除 注释 ) : 删除 注释 。 


国 (环绕 标签 ) : 在 所 选 代码 两 侧 自动 添加 某 个 标签 。 
贺 ( 最 近 的 代码 片段 ) : 从 “代码 片段 "面板 中 插入 代码 。 
加 (移动 或 转换 CSS) : 移动 CSS 位 置 ,或 转换 CSS 类 别 。 
图 ( 缩 进 代码 ): 将 选 定 内 容 向 右 移 动 。 

国 ( 凸 出 代码 ): 将 选 定 内 容 向 左 移动 。 

图 (格式 化 源 代码 ) : 将 代码 赋予 标准 格式 。 


3.1.2 属性 面板 


显示 属性 面板 的 快捷 键 是 Ctrl 十 F3, 用 户 可 以 通过 该 面板 检查 和 编辑 当前 选 定 页 面 
元 素 ( 如 文本 和 插入 的 对 象 ) 最 常用 的 属性 。 根 据 选 定 元 素 的 不 同 ,属性 面板 所 呈现 的 属 
性 也 不 尽 相 同 , 如 图 3-4 和 图 3-5 所 示 。 


[FID 四 F| 疾 加 | 


图 3-3 ”编码 工具 栏 
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图 3-4 属性 面板 ( 选 定 对 象 为 图 像 ) 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


图 3-5 属性 面板 ( 选 定 对 象 为 文本 ) 
通过 属性 面板 ,用 户 能 够 快捷 地 修改 ,应 用 对 象 的 基本 属性 ,使 用 频率 较 高 。 
3.1.3 常用 面板 介绍 


Dreamweaver CS6 为 用 户 提供 了 可 自由 组 合 的 多 功能 面板 ,大 量 操作 可 以 快捷 地 通 
过 面板 迅速 完成 。 

1. 插入 面板 

显示 或 隐藏 插入 面板 的 快捷 键 是 Ctrl 十 F2。 该 面板 包含 用 于 创建 和 插入 对 象 ( 例 如 
表格 、 图 像 和 链接 ) ,其 中 包含 多 种 按钮 。 

这 些 按钮 按 9 种 类 别 进行 组 织 。 

(1) 常用 类 别 : 用 于 创建 和 插入 最 常用 的 对 象 ,例如 图 像 和 表格 。 

(2) 布局 类 别 : 用 于 搬入 表格 .表格 元 素 .div 标签 ,框架 和 Spry 构件 。 

(3) 表单 类 别 : 包含 一 些 按钮 ,用 于 创建 表单 和 插入 表单 元 素 。 

(4) 数据 类 别 : 用 于 插入 Spry 数据 对 象 和 其 他 动态 元 素 , 例 如 记录 集 .重复 区 域 以 及 
插入 记录 表单 和 更 新 记录 表单 。 

(5) Spry 类 别 : 包含 一 些 用 于 构建 Spry 页 面 的 按钮 ,包括 Spry 数据 对 象 和 构件 。 

(6) jQuery Mobile 类 别 : 可 帮助 用 户 快速 设计 出 适合 大 多 数 移动 设备 的 Web 应 用 
程序 ,同时 可 使 其 自身 适应 设备 的 各 种 尺寸 。 

(7) InContext Editing 类 别 : 包含 供 生成 InContext 编辑 页 面 的 按钮 ,包括 用 于 可 编 
辑 区 域 .重复 区 域 和 管理 CSS 类 的 按钮 。 

(8) 文本 类 别 : 用 于 插入 各 种 文本 格式 和 列表 格式 的 标签 。 

(9) 收藏 夹 类 别 : 用 于 将 插入 面板 中 最 常用 的 按钮 分 组 和 组 织 到 某 一 公共 位 置 。 

部 分 类 别 如 图 3-6 一 图 3-8 所 示 。 


。 常 用 
[Er 


图 3-6 “常用 ”插入 面板 
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图 3-7 “表单 插入 面板 


“常用 ”类别 是 插入 面板 中 使 用 率 非 常 高 的 类 别 ,其 中 各 按钮 的 含义 如 下 。 
号 ( 超 链接 ): 在 网 页 中 搬入 超 链接 。 
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Spy jQuery Mobie 
: 吕 加 加 鲫 口 回 司 革 冉 旧 5 


3-8 jQuery Mobile 插入 面板 


回 ( 电 子 邮件 链接 ) : 插入 电子 邮件 链接 。 

图 (命名 锚 记 ): 用 于 页 面 内 定位 。 

对 (水 平 线 ) : 在 光标 处 插 和 水平线。 

国 ( 表 格 ): 插入 表格 。 

国 ( 插 入 div 标签 ) : 插入 div 标签 。 

国 ( 图 像 ): 可 插入 图 像 、 占 位 符 、 热 点 等 对 象 。 

圈 ( 媒 体 ) : 可 插入 Flash、FLYV 等 多 媒体 对 象 。 

磋 ( 构 件 ): 由 HTML、CSS 和 JavaScript 组 成 的 网 页 组 件 。 
图 (日 期 ) : 可 插入 多 种 格式 的 日 期 。 

国 ( 服 务 器 端 包括 ) : 选择 一 个 网 页 文件 ,将 其 添加 到 当前 站 点 中 。 
加 (注释 ): 插入 HTML 注释 。 

画 ( 文 件 头 ): 设置 文件 头 不 同 的 属性 。 

到 ( 脚 本 ): 插入 脚本 。 

图 (模板 ) : 创建 和 编辑 模板 。 

圆 (标签 ): 插入 置 标语 言 的 标签 ,方便 编辑 代码 。 


2.“CSS 样式 ”面板 

“CSS 样式 ”面板 的 作用 在 于 跟踪 影响 当前 所 选 页 面 元 素 的 CSS 规则 和 属性 ,打开 或 
隐藏 该 面板 的 快捷 键 是 Shift 十 F11, 如 图 3-9 所 示 。 对 于 初 
学 者 来 讲 ,“CSS 样式 ”面板 可 以 用 于 查看 和 修改 CSS 规则 ， 
而 随 着 对 CSS 的 熟悉 ,笔者 建议 读者 手动 书写 CSS 规则 ,这 
样 不 仅 对 各 种 属性 有 进一步 了 解 , 而 且 编写 代码 的 效率 会 大 
幅 提升 。 


3.1.4 常规 设置 


1. 首选 参数 设置 
执行 “编辑 "一 “首选 参数 "命令 ,或 按 Ctrl 十 U 键 , 即 可 
打开 “首选 参数 ”对 话 框 ,如 图 3-10 所 示 。 
在 该 设置 界面 中 ,包含 “文档 选项 ”和 “编辑 选项 ”两 类 设 图 3-9 “CSS 样式 "面板 
置 ,部 分 主要 的 设置 含义 如 下 。 
避 启 用 相关 文件 : 用 于 查看 哪些 文件 与 当前 文档 相关 (例如 CSS 或 JavaScript 文 
件 )。Dreamweaver 在 文档 顶部 为 每 个 相关 文件 显示 了 一 个 按钮 , 单 击 该 按钮 可 
打开 相应 文件 。 
气 移 动 文件 时 更 新 链接 : 当 移 动 、 重 命名 或 删除 站 点 中 的 文档 时 所 发 生 的 操作 ,系统 
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文档 需 : 国 显 示 欢 好 屏幕 @) 

园 鲁 提醒 新 打开 文档 双 ) 

团 打开 只 文件 时 区 用 户 中 

加 启用 相关 文件 加) 

搜索 动态 相关 文件 四) 

移动 文件 时 更 新 链接 L): | 提示 二 = 
编辑 选项 : 国 插 入 对 象 时 显示 对 话 杠 ) 

回 允 许 双 字 节 内 联 葵 入 四) 

加 标题 后 切换 到 普通 段落 愉 ) 

国 允 许多 个 连续 的 空格 叫 ) 

国 用 《<strong> 和 《en> 代 苦 b> 和 <i>aD 

团 在 Gy 或 Gl》-G6》 标签 中 让 置 可 编辑 区 博时 发 财 寺 


历史 步 劝 最 多 次 数 &): 50 


接 瑟 字典 @@ 四 


部 助 四 [3 [二 了 消 


图 3-10 首选 参数 


会 提示 用 户 进行 何 种 操作 。 

允许 多 个 连续 的 空格 : 指定 在 “设计 ?视图 中 输入 两 个 或 更 多 的 空格 时 将 创建 不 中 
断 的 空格 ,这 些 空格 在 浏览 器 中 显示 为 多 个 空格 。 该 选项 主要 针对 习惯 于 在 字 处 
理 程序 中 输入 的 用 户 。 当 禁用 该 选项 时 ,多 个 空格 将 被 当 作 单 个 空格 。 

避 历 史 步 骤 最 多 次 数 : 确定 在 "历史 记录 ?面板 中 保留 和 显示 的 步骤 数 。 


2. 代码 格式 设置 

(1) 执行 “编辑 ”一 “首选 参数 "命令 ,打开 “首选 参数 ”对话 框 。 选 择 左 侧 的 “代码 格 
式 ? 选 项 。 

(2) 在 “高 级 格式 设置 " 旁 单 击 CSS 按钮 ,此 时 弹出 如 图 3-11 所 示 的 对 话 框 。 

(3) 在 此 对 话 框 中 ,选择 要 应 用 于 CSS 源 代码 的 选项 ,即刻 在 下 方 “预览 ” 窗 格 中 实时 
显示 修改 后 的 预览 效果 。 这 里 清除 “每 个 属性 位 于 单独 的 行 上 " 复 选 框 , 即 可 实现 属性 放 
置 在 一 行 上 的 效果 。 其 他 设置 效果 内 容 读者 可 以 自行 修改 ,这 里 不 再 袭 述 。 


3.2 站 点 


站 点 (site) 指 的 是 一 个 存储 区 域 , 它 存 储 了 一 个 网 站 的 所 有 文件 。 在 实际 工作 中 , 通 
常 为 每 一 个 要 处 理 的 网 站 建立 一 个 本 地 站 点 ,这样 可 以 方便 地 对 网 站 内 部 的 文件 进行 组 
织 、 维 护 和 管理 。 


3.2.1 站 点 的 基本 概念 及 其 创建 方法 


站 点 由 文档 和 文件 夹 组 成 ,不 同 的 文件 夹 保存 不 同类 别 的 网 页 内 容 , 如 images 文件 夹 
存放 各 种 网 页 图 像素 材 ;style 文件 夹 存放 CSS 样式 文件 :JavaScript 文件 夹 存放 JS 文件 。 
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加 启用 纺 进 属性 @。 1 [图表 往 ， [| 
和 二 民 攻 位 于 昔 二 上 EBD 
回 左 大 括号 位 于 单 朱 的 行 上 
国 公 在 多 于 一 个 属性 时 才 适 用 中 ) 
回 规 m9 所 有 选择 器 位 于 同行 上 G@) 
加 规则 之 间 衬 入 
ji 咎 
.myShortStyle { - 
color: #000000; 
}》 
.myLongStylel, .myLongStyle2 { 
Color: #FFFFFF; 
margin: Opx; 
padding: Opx; 
display: block; 


图 3-11 “CSS 源 格式 选项 ”对 话 框 


1. 本 地 站 点 
本 地 站 点 指 的 是 在 本 地 计算 机 硬盘 中 创建 用 来 储存 整个 网 站 文件 的 文件 夹 。 制 作 网 
页 文件 的 所 有 素材 及 其 相关 文件 均 要 放 在 该 站 点 内 


的 文件 夹 下 。 在 Dreamweaver 中 ,使 用 “文件 ”面板 |[ 加 20 国家 名 教学 成 果 奖 申报 加 站 =] [本 地 视图 x 
管理 站 点 ,如 图 3-12 所 示 。 ee 本 
2. 远程 站 点 © is 文件 赤 。 201 
远程 站 点 指 的 是 存储 于 Internet 服务 器 上 的 站 | 2 昌 号。 i 
点 和 相关 文档 。 也 就 是 说 ,用 户 发 布 到 远程 文件 夹 | 5 we No 
的 文件 和 子 文件 夹 是 本 地 创建 的 文件 和 子 文件 夹 的 | 
副本 。 ea 
mb643. jpe 113KB ACDSee. ,. 201| 
全 本 二 生生 局 是 
进行 网 页 制作 的 第 一 步 就 是 创建 本 地 站 点 ,站 SB AR Ml 2 260 e201. 
点 管理 会 让 用 户 的 工作 变 得 简单 而 富有 成 效 ,况且 


许多 功能 必须 在 站 点 中 才能 实现 。 总 之 ,如 果 不 是 图 312 “文件 "面板 
仅 编辑 需要 的 单个 页 面 .那么 就 必须 创建 站 点 。 

【案例 3-1】 创建 “ 字 泽 互联 ?站 点 。 

| 在 Dreamweaver CS6 的 菜单 栏 中 执行 “站 点 ”一 “新 建站 点 ”命令 ,显示 如 图 3-13 
所 示 的 对 话 框 。 

@ 在 此 对 话 框 左 侧 选择 “站 点 ”类别 ,并 在 右 侧 “站 点 名 称 ”文本 框 中 输入 “ 宇 泽 互 联 ” 
文字 内 容 ,然后 单 击 帮 按钮 ,在 弹出 的 对 话 框 中 为 本 地 站 点 文件 夹 选 择 存储 路 径 。 需 要 
特别 注意 的 是 此 本 地 文件 夹 可 以 位 于 本 地 计算 机 上 ,也 可 以 位 于 网 络 服务 器 上 。 

@ 设置 完成 后 ,可 以 填写 其 他 类 别 ,包括 “服务 器 ”类别 , 还 可 以 在 其 中 指定 远程 服务 
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图 3-13 站 点 设置 对 象 


器 上 的 远程 文件 夹 。 由 于 本 例 不 涉及 发 布 页 面 操作 ,所 以 这 里 不 需要 进行 任何 设置 。 
@ 单 击 “ 保 存 ” 按 钮 , 即 可 完成 本 地 站 点 的 创建 。 此 时 “文件 ”面板 中 立刻 显示 新 站 点 
的 根 目 录 , 如 图 3-14 所 示 。 


3.2.2 “文件 ”面板 的 常用 操作 
站 点 创建 完成 后 ,站 点 内 没有 任何 文件 ,下 面 将 主要 介绍 站 点 内 的 基本 操作 ,这 些 操 
作 也 是 工作 过 程 中 的 第 一 个 环节 。 


1， 新 建文 件 夹 和 文件 

【案例 3-2】 新 建文 件 夹 和 文件 。 

@ 在 成 功 创建 站 点 的 状态 下 , 右 击 “文件 "面板 内 站 点 名 称 ,然后 在 弹出 的 右键 菜单 
中 选择 “新 建文 件 夹 ”选项 ,如 图 3-15 所 示 。 


忌日 [ta 


图 3-14 创建 < 宇 泽 互联 ?站 点 图 3-15 右键 菜单 
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@ 此 时 ,在 站 点 根 目录 下 新 增 了 一 个 文件 夹 , 并 且 新 建文 件 夹 名 称 处 于 可 编辑 状态 ， 
如 图 3-16 所 示 。 这 里 将 新 建文 件 夹 命名 为 style, 用 于 存放 站 点 CSS 样式 文件 。 

@ 重复 步骤 @ 可 以 创建 多 个 文件 夹 。 此 外 ,选中 某 个 文件 夹 将 其 拖 放 到 男 一 个 文件 
夹 上 面 ,释放 鼠标 即 可 实现 嵌 套 文件 夹 的 效果 ,如 图 3-17 所 示 。 


文人 

Er 

只 Cl 只 名 固 | 罩 只 Cl3f 了 名 加 | 日 
二 eR 


图 3-16 新 建文 件 夹 图 3-17” 赃 套 文件 夹 


@ 若 想 要 创建 网 页 文件 ,只 须 执行 “文件 ”>“ 新 建 "命令 ,或 者 按 Ctrl 十 N 键 , 这 时 显 
示 *“ 新 建文 档 ”" 对 话 框 。 

@ 选择 对 话 框 左 侧 的 “空白 页 "类 别 , 从 “页 面 类 型 "中 选择 HTML 类 型 ,然后 在 “ 布 
局 "列表 框 中 选择 “无 "类 型 。 

@ 在 “文档 类 型 "下 拉 菜 单 中 选择 HTML 5 选项 ,如 图 3-18 所 示 。 最 后 单 击 “ 创 建 ” 
按钮 , 即 可 创建 一 个 空白 文档 。 最 后 , 按 Ctrl 十 S 键 保存 网 页 文档 。 


布局 
i | 
DD sen Ee 1 到 国定 ， 居中 
量 zu iiR) 1 列国 证 ,居中 ， 标 暑 和 和 主 
记 时 1 列 潜 态 , 居中 
国 | sm 时 1 到 让 态 ， 居中 ， 标 六 和 
哇 Metioseript 2 玫 , 右 他 
人 2 列国 证， 右 介 位 、 标 是 oH 
Jeseipt 2 ME, ENE fg 
国 机 8 页 鲁 开 2 列 液态 ， 右 全 栏 
2 列 六 态 ， 右 创作 、 标 题 和 有 
吨 ra | 本 宝 sn 2 列 六 态 , 左 便 们 
有 ASP vbscript 2 列 凌 态 ， 左 侧 栏 、 标 是 和 有 主 mL 文 精 
呈 nsP ET Ce 3 3 证 
加 其 他 Asp ET YB 3 列国 证， 标 征 和 和 主 
只 Coldfusion 3 列 液态 
本 Colaposion 组 伯 3 列 六 态 ， 标 是 和 
rr ms: 2 歼 固定， 右 介 栏 、 标 蜂 和 贿 : 
ne ms 3 列国 定 ， 标 是 和 峙 主 


图 3-18 “新 建文 档 ” 对 话 框 


~ 
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2. 站 点 内 文件 的 基本 操作 


在 “文件 ”面板 中 ,可 以 方便 地 对 站 点 内 的 文件 执行 复制 .移动 和 删除 等 操作 ,这 里 以 
示例 的 方式 讲述 具体 操作 方法 。 

【案例 3-3】 站 点 内 的 文件 基本 操作 。 

Q@ 在 “文件 ”面板 中 , 右 击 某 个 文件 或 文件 夹 , 在 弹出 的 右键 菜单 中 执行 “编辑 " 子 菜 
单 中 的 命令 , 即 可 完成 复制 粘贴 .删除 等 操作 ,如 图 3-19 所 示 。 


葛 切 OO Cd+X 
持 由) BR C+C 
获取 (G) 粘贴 (A) Ctrl+V 
取出 日 MD) Da 
ED 复制 Cul+D 
A 重 命名 (N) 已 


3-19 站 点 内 的 基本 操作 


@ 当 执 行 这 些 基本 操作 时 ,必定 造成 文件 位 置 的 变化 ,此 时 弹出 如 图 3-20 所 示 的 对 
话 框 。 单 击 “ 更 新 "按钮 ,系统 将 自动 更 新 与 文件 相关 联 的 链接 。 


更 新 以 下 文件 的 树 接 吗 ? 
/inages/index. html 


图 3-20 “更 新 文件 ”对 话 框 


3.2.3 管理 站 点 


创建 好 本 地 站 点 后 ,必要 时 还 需 对 站 点 进行 多 方面 的 管理 ,如 打开 站 点 、 复 制 站 点 、 编 
辑 站 点 和 删除 站 点 等 。 

【案例 3-4】 管理 站 点 。 

中 在 Dreamweaver CS6 的 菜单 栏 中 执行 “站 点 ”一 “管理 站 点 ”命令 ,打开 如 图 3-21 
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2014 国 家 级 教学 成 果 奖 申报 由 站 


图 3-21 “管理 站 点 ”对 话 框 


所 示 的 对 话 框 。 

@ 在 列表 中 双击 某 个 站 点 的 名 称 , 即 可 对 该 站 点 的 信息 进行 编辑 。 

@ 如 果 不 需 要 Dreamweaver 对 某 个 本 地 站 点 进行 管理 ,同样 可 以 将 其 从 站 点 列表 中 
删除 。 选 择 某 个 本 地 站 点 , 单 击 国 | 按钮 ,经 过 确认 后 即 可 删除 某 个 站 点 。 

@ 如 果 需 要 创建 多 个 结构 类 似 或 相同 的 站 点 , 则 可 以 利用 站 点 的 复制 功能 。 从 一 个 
基准 的 站 点 中 复制 多 个 站 点 ,然后 根据 需要 再 进行 二 次 开发 ,这 样 可 以 极 大 地 提高 工作 效 
率 。 选 择 某 个 本 地 站 点 后 , 单 击 困 按钮 即 可 。 

@ 站 点 导出 功能 可 以 方便 地 在 各 计算 机 和 软件 版 本 之 间 移 动 站 点 。 选 择 某 个 本 地 
站 点 后 , 单 击 攻 按钮 .此 时 弹出 “导出 站 点 "对话 框 。 选 择 导出 站 点 的 保存 位 置 后 , 单 击 
“保存 ”按钮 ,Dreamweaver 将 该 站 点 的 设置 保存 为 带 有 . ste 扩展 名 的 XML 文件 。 

@ 导入 站 点 的 操作 与 上 述 步骤 相反 ,只 须 在 “管理 站 点 "对话 框 中 单 击 “ 导 入 站 点 ” 按 
钮 ,然后 选择 之 前 导出 的 站 点 文件 即 可 。 


3.3 重要 的 div 元 素 


纵 观 目前 的 各 类 网 站 ,其 源 代 码 中 包含 了 许多 div 元 素 , 如 图 3-22 所 示 。 其 实 
二 div 二 标签 与 其 他 标签 一 样 ,都 是 HTML 文档 中 的 一 个 标签 ,从 语义 上 来 讲 它 只 不 过 是 


div 元 素 的 名 字 div 元 素 的 内 联 样式 
| 


BE ree ty1e Aspiny DLoeky 
style display block; Positiont absolute;top: 30pr3 right:30px;border: 1px solid;padding: Spx lpxiryc1aivy 


display: block; ></div> 

pdiv id="ftCon” style="display: block; ">-</div> 
<div id="wrapper_wrapper”></div> 

div> 


图 3-22 百度 搜索 页 面 的 主体 结构 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


一 个 没有 语义 的 .具有 很 强 适 用 性 的 一 个 标签 。 
3.3.1 div 元 素 是 什么 


div 元 素 是 一 个 块 级 元 素 , 用 来 为 HTML 5 文档 中 大 块 内 容 提供 结构 和 背景 , 它 可 以 
把 文档 分 割 为 独立 的 不 同 的 部 分 。div 元 素 的 起 始 标签 和 结束 标签 之 间 的 所 有 内 容 都 
是 用 来 构成 这 个 块 的 ,其 中 所 包含 元 素 的 特性 由 过 div 之 标签 的 属性 来 控制 ,或 者 是 通过 
使 用 样式 表格 式 化 这 个 块 来 进行 控制 。 

在 许多 年 前 ,版面 的 布局 定位 完全 依赖 于 表格 对 象 (table) 。 在 页 面 中 通过 绘制 多 个 
嵌 套 的 表格 ,然后 在 表格 位 置 中 插入 所 需 内 容 , 最 后 通过 表格 的 位 置 控制 ,达到 布局 版 面 
的 目的 。 

而 在 目前 基于 Web 标准 的 网 站 设计 中 ,不 再 使 用 传统 的 表格 定位 技术 ,取而代之 的 
是 采用 DIV 十 CSS 的 方式 实现 各 种 布局 。 


3.3.2 在 Dreamweaver 中 创建 DIV 容器 的 方法 


1. 使 用 Dreamweaver 中 可 视 化 功能 创建 DIV 容器 

借助 Dreamweaver CS6 能 够 快速 插入 二 div 二 标签 并 对 其 应 用 现 有 样式 ,具体 步骤 用 
实例 说 明 。 

【案例 3-5】 使 用 Dreamweaver 创建 DIV 容器 。 

J@ 启动 Dreamweaver CS6 ,将 光标 定位 在 需要 插入 div 标签 的 位 置 。 

@ 执行 “搬入 ”~* 布 局 对 象 ”Div 标签 ”命令 ,或 者 在 插入 面板 “布局 "类别 中 , 单 击 
“插入 Div 标签 "按钮 辆 |。 

@ 此 时 弹出 如 图 3-23 所 示 的 对 话 框 。 在 此 对 话 框 中 , “插入” 下拉 列 表 框 用 于 选择 
div 标签 的 位 置 以 及 标签 名 称 ;* 类 ”下 拉 菜 单 中 显示 了 当前 应 用 于 标签 的 类 样式 ;“1D” 下 
拉 菜 单 用 于 更 改 标识 DIV 容器 的 名 称 。 这 里 在 ID 下 拉 菜 单 中 输入 “dx”。 


图 3-23 “插入 Div 标签 ”对 话 框 


@ 参数 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 , 即 可 创建 一 个 DIV 容器 ,如 图 3-24 所 示 。 创 
建 后 的 二 div 之 标签 在 设计 视图 中 被 虚线 框 所 包围 , 当 鼠 标 悬 停 在 DIV 容器 上 时 虚线 框 

需要 说 明 的 是 ,创建 一 div 二 标签 只 是 CSS 布局 工作 的 第 一 步 。DIV 的 作用 仅 是 将 
页 面 中 的 内 容 元 素 标识 出 来 ,为 内 容 添 加 样式 则 由 CSS 来 完成 。 
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3-24 插入 div 标签 后 的 拆 分 视图 


2. 创建 嵌 套 的 DIV 容器 

div 元 素 是 可 以 被 芷 套 的 ,主要 用 于 实现 更 为 复杂 的 页 面 排版 。 下 面 以 两 个 实例 说 
明 嵌 套 的 DIV 容器 之 间 的 关系 。 

【案例 3-6】 未 嵌 套 的 DIV 容器 。 

新建 HTML 5 空白 文档 ,使 用 上 一 案例 中 的 方法 创建 一 个 名 为 top 的 DIV 容器 。 

@ 将 光标 定位 在 “代码 视图 ”的 任意 位 置 ,在 插入 面板 “布局 类别 中 , 单 击 “搬入 Div 
标签 ”按钮 国 , 

@ 在 弹出 的 对 话 框 中 ,设置 “插入 ”选项 为 “在 标签 之 后 ”, 并 在 后 方 的 下 拉 列 表 框 中 
选择 二 div id 一 "top" 二 ;设置 ID 选项 为 main, 如 图 3-25 所 示 。 然 后 单 击 “确定 ”按钮 , 即 
可 在 top 容器 后 面 插入 main 容器 。 

@ 以 同样 的 方法 ,在 main 容器 后 面 插入 名 为 footer 的 DIV 容器 ,最 终 的 页 面 结构 
如 图 3-26 所 示 ,布局 如 图 3-27 所 示 。 


[Kaiv id=top> | 


top 

图 3-25 在 top 容器 后 面 插入 main 容器 i 
boay> 
<div id="top"> 此 处 显示 。id "cop” 的 内 容 </div> 
<div id="main"> 此 处 显示 “id "mainm 的 内 容 </div> 
<div id="footer"> 此 处 显示 。id "footer” 的 内 容 </div> 
</body> footer 

3-26 未 嵌 套 的 DIV 容器 的 页 面 结构 图 3-27 未 嵌 套 的 DIV 容器 布局 示意 图 


【案例 3-7】 谍 套 的 DIV 容器 。 

Q@ 新 建 HTML 5 空白 文档 ,创建 一 个 名 为 container 的 DIV 容器 。 

@ 将 光标 定位 在 “代码 视图 ”的 任意 位 置 , 在 插入 面板 “布局 "类别 中 , 单 击 “ 插 入 Div 
标签 "图 标 按钮 国 。 

@ 在 弹出 的 对 话 框 中 ,设置 “插入 ”选项 为 “在 开始 标签 之 后 ”, 并 在 后 方 下 拉 菜 单 中 
选择 二 div id 二 "container" 记 ,设置 ID 选项 为 top, 如 图 3-28 所 示 。 然 后 , 单 击 “ 确 定 ” 按 
钮 , 即 可 在 container 容器 内 部 插入 top 容器 。 

@ 同样 的 方法 ,在 容器 后 面 或 内 部 插入 多 个 容器 ,最 终 的 页 面 结 构 如 图 3-29 所 示 ， 


~ 
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Kdiv id=“container » 


3-28 在 container 容器 内 部 插入 top 容器 


布局 如 图 3-30 所 示 。 

本 案例 中 ,id 一 "container" 的 DIV 作为 盛 放 其 他 元 素 的 容器 , 它 所 包含 的 所 有 元 素 对 
于 id 一 "container" 的 DIV 来 说 都 是 典 套 关系 。 对 于 id 一 "main" 的 DIV 容器 , 则 根据 实际 
情况 进行 布局 ,这 里 分 别 定义 id 一 "mainbox" 和 id 一 "sidebox" 的 两 个 二 div 之 标签 。 虽 然 
新 定义 的 二 div 之 标签 之 间 是 并 列 的 关系 ,但 都 处 于 id 一 "main" 的 二 div 之 标签 内 部 ,因此 
它们 与 id 一 "main" 的 DIV 形成 了 一 个 凡 套 关系 。 


container 


top 


body> 
|<aiv id="container"> mainbox sidebox 
<div id="cop"> 此 处 显示 id "cop” 的 内 容 </div> 
<div id="main"> 
<div id="mainbox"> 此 处 显示 id "mainbox” 的 内 容 </div>| 


<div id="sidebox"> 此 处 显示 id "sideboxw 的 内 容 </div>| 
</div> 
<div id="foocer"> 此 处 显示 id "footer， 的 内 容 </div> 
</div> 
/body> 


图 3-29 嵌 套 的 DIV 容器 页 面 结构 图 3-30 赃 套 的 DIV 容器 布局 示意 图 


3. 手动 创建 DIV 容器 

所 谓 手动 创建 DIV 容器 指 的 是 ,直接 在 Dreamweaver 的 代码 视图 中 输入 相关 标签 的 
做 法 ,这 种 创建 容器 的 方法 笔者 极力 推荐 。 虽 然 上 述 案 例 中 使 用 Dreamweaver 提供 可 视 
化 创建 容器 的 方法 ,但 仅仅 是 针对 初学 者 ,而 在 实际 工作 中 ,直接 修改 源 代码 的 工作 效率 
远 远 高 于 可 视 化 的 方法 。 

为 了 让 读者 尽早 地 熟悉 和 掌握 各 类 标签 的 使 用 方法 ,这 里 约定 本 教材 所 讲授 的 案例 
中 采用 “可 视 化 创建 容器 "和 “手动 创建 容器 ”交替 进行 的 方法 来 实现 页 面 结构 。 


3.4 CSS 人 门 
HTML 5 和 CSS 3 将 改变 Web 世界 。 虽 然 W3C 目前 仍然 在 对 CSS 3 规范 进行 开 


发 ,但 这 并 不 影响 设计 师 对 它 的 使 用 ,因为 现在 的 浏览 器 已 经 实现 了 相当 多 的 CSS 3 属 
性 。 本 节 向 读者 介绍 有 关 CSS 3 的 基本 知识 。 
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3.4.1 什么 是 CSS 


CSS(Cascading Style Sheet, 层 全 样式 表 ) 是 由 W3C( 万 维 网 联盟 ) 的 CSS 工作 组 创 
建 和 维护 的 。 它 是 一 种 不 需要 编译 ,可 直接 由 浏览 器 执行 的 标记 性 语言 ,用 于 控制 Web 
页 面 的 外 观 。 通 过 使 用 CSS 样式 控制 页 面 各 元 素 的 属性 显示 ,可 将 页 面 的 内 容 与 表现 形 
式 进行 分 离 。 

1. CSS 3 的 由 来 

CSS 有 多 种 版 本 ,CSS 1 是 1996 年 W3C 的 一 个 正式 规范 ,其 中 包含 最 基本 的 属性 
(如 字体 .颜色 和 空白 边 ) 。CSS 2 是 在 CSS 1 的 基础 上 增添 了 某 些 高 级 概念 (如 浮动 和 定 
位 ) 以 及 高 级 的 选择 器 (如 子 选择 器 、 相 邻 同胞 选择 器 和 通用 选择 器 ) ,并 于 1998 年 作为 正 
式 规范 发 布 。CSS 3 是 CSS 2 技术 的 一 个 升级 版 本 , 它 将 以 前 的 规范 分 解 为 多 个 小 模块 
进行 管理 ,这 些 模块 包括 盒子 模型 ,列表 模块 . 超 链接 方式 .语言 模块 .背景 和 边框 ,文字 特 
效 和 多 栏 布局 等 。 


2. CSS 在 网 页 设计 中 的 作用 
表现 与 结构 相 分 离 ,使 得 网 页 可 以 仅 由 内 容 组 成 ,而 将 所 有 网 页 的 风格 控制 指向 CSS 
样式 文件 ,示意 图 如 图 3-31 所 示 。 


一 个 或 多 个 CSS 文 档 


潭 亮 的 页 面 


图 3-31 CSS 作用 示意 图 


这 样 做 的 好 处 表现 在 以 下 几 个 方面 。 

(1) 简化 了 网 页 的 格式 代码 ,外 部 样式 被 暂 存 在 浏览 器 缓存 中 ,加 快 了 显示 速度 。 

(2) 方便 网 页 风格 的 同时 更 新 ,缩短 更 新 和 维护 的 时 间 。 

(3) 由 于 代码 减少 ,汇总 起 来 能 够 节约 很 多 流量 ,这 样 便 间 接地 减少 了 服务 器 和 带宽 
的 费用 ,节约 资金 。 


3.4.2 CSS 语法 与 链接 方法 


1. CSS 语法 
CSS 语言 由 两 部 分 构成 : 一 部 分 是 选择 器 (selector); 另 一 部 分 是 一 条 或 多 条 声明 。 
这 里 声明 由 一 个 属性 (property) 和 一 个 属性 值 (value) 组 成 。 基 本 格式 如 下 。 


selector { property: value; } 
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选择 器 通常 是 需要 改变 样式 的 HTML 5 元 素 或 用 户 自 定义 的 ID 名 称 和 类 名 称 ; 属 
性 则 是 希望 设置 的 样式 属性 。 
例如 ,将 HTML 5 页 面 中 footer 元 素 的 内 容 居 中 ,字体 大 小 设置 为 12px( 像 素 ), 其 
代码 如 下 。 
footer { 
text- aligqn:oanter; 
font- size: lpx; 
} 
在 这 个 例子 中 ,footer 是 选择 器 ,text-align 和 font-size 是 属性 ,center 和 12px 是 值 。 


2. 链接 方法 

要 想 通 过 CSS 控制 页 面 元 素 的 外 观 , 必 须 将 CSS 文档 与 网 页 文档 建立 链接 。 方 法 有 
三 种 , 即 内 联 样式 (Inline Style) 内 部 样式 (Internal Style Sheet) 和 外 部 样式 (External 
Style Sheet) 。 

(1) 内 联 样 式 

内 联 样式 是 混合 在 HTML 5 标签 中 使 用 的 ,这 种 方法 可 以 很 简单 地 对 某 个 元 素 单独 
定义 样式 。 例 如 : 


<p style= "font- size:20px; "> 内 联 样式 。< /p> 


内 联 样式 仅 作用 于 当前 元 素 p, 其 他 段落 元 素 不 受 其 影响 。 

(2) 内 部 样式 

内 部 样式 是 把 样式 表 放 到 页 面 的 王 head 二 区 域内 ,这 种 链接 方式 决定 了 该 样式 表 将 
作用 于 本 页 面 ,不 能 控制 其 他 页 面 。 例 如 : 

<head> 

<meta charset= "utf- 8"> 

<title> 内 部 样式 < /title> 

<Sstyle type= "text/css"> 

body { background: # FF0; } 

</style> 

< /head> 

(3) 外 部 样式 

外 部 样式 是 把 CSS 单独 写 到 一 个 CSS 文件 内 ,然后 在 源 代码 中 以 link 方式 链接 , 书 
写 在 二 head 二 区 域内 。 它 的 好 处 是 不 但 本 页 可 以 调用 ,其 他 页 面 也 可 以 调用 ,这 种 处 理 方 
式 是 实际 工作 中 最 常用 的 一 种 形式 。 例 如 : 


< link href- "style/div.css" rel= "stylesheet" type= "text/css" /> 


【案例 3-8〗 CSS 语法 。 
OO 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 。 
@ 单 击 “ 拆 分 ”按钮 ,切换 为 拆 分 视图 ,在 界面 左 侧 的 代码 视图 中 书写 如 下 代码 。 


< !Goctype htm> 
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<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 语法 </title> 

<style type="text/css"> 
body {background: #FF0;}/* 设置 页 面 背景 色 为 黄色 * / 
hl {color: blue;}/* 设置 标题 为 蓝 色 * / 


sa 
a {font-family: "微软 雅 黑 ";}/* 设置 超 链 接 字体 * /两 处 者 为 元 素 编写 了 CSS 
< /style> 规则 ， 但 实际 预览 效果 仅 显 


</head> 示 为 一 种 ， 这 说 明 内 联 样式 
body 的 优先 级 高 于 内 部 样式 
<header> 
<hl style="color:red;">CSS 语法 练习 (这 里 的 字体 为 红色 )</h1l> 
<nav> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 语 法 </a></1i> 
<1i><a href="#"> 测 试 </a></1i> 
</ul> 
</nav> 
</header> 
</body> 
</html> 


加 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-32 所 示 。 


巴 css 油 法 
< 2ecelal | 


CSS 语 法 练习 《这 里 的 字体 为 红色 ) 


图 3-32 案例 3-8 的 预览 效果 


3.4.3 盒子 模型 


盒 模型 (Box Model) 是 CSS 控制 页 面 时 的 重要 概念 , 它 指定 了 元 素 如 何 显 示 以 及 如 
何 相互 交互 。CSS 3 标准 里 引入 了 一 些 新 盒子 模型 的 参数 ,使 设计 者 在 CSS 2 的 基础 上 
能 更 灵活 地 调整 页 面 上 各 个 容器 的 大 小 和 位 置 。 

在 网 页 设计 中 ,页 面 中 的 每 个 元 素 可 以 理解 为 一 个 矩形 框 , 这 个 框 由 元 素 的 内 容 、 内 
边 距 (padding) ,边框 (border) 和 外 边 距 Cmargin) 组 成 ,示意 图 如 图 3-33 所 示 。 

对 于 盒 模型 的 相关 属性 可 以 这 样 理解 ,假如 用 户 购 买 了 一 台 冰 箱 ,那么 冰箱 对 应 的 就 
是 网 页 中 的 实际 内 容 , 冰 箱 外 面包 庄 的 塑料 泡沫 对 应 的 就 是 内 边 距 (padding) ,包装 冰箱 


一 
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| ， 


3-33 ”盒子 模型 
的 纸 盒 子 对 应 的 就 是 边框 (border) ,如 果 多 台 冰 箱 放 在 一 起 ,冰箱 与 冰箱 之 间 的 距离 对 应 
的 就 是 外 边 距 (margin) 。 
【案例 3-9】 盒子 模型 。 
@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 一 body 二 与 一 /body 过 标签 内 
部 增加 如 下 代码 。 


<div id= "boxl 必 boxl< /div> 
<div id= "box2 必 bax2< /div> 


@ 在 当前 页 面 的 一 head 盖 与 一 /head 二 标签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 


也 全 子 模型 x 
i 10px; 全 3 CQ DD file:///E:/ 编 s 窜 | 三 


</style> 


G 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 
图 3-34 所 示 。 图 3-34 案例 3-9 的 预览 效果 
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需要 注意 的 是 ,boxl 实际 的 高 度 为 130px(5px 十 10px 十 100px 十 5px 十 10px),box2 
实际 的 高 度 为 100px(10px 十 5px 十 10px 十 50px 十 10px 十 5px 十 10px) 。 


1. border-radius 属性 

在 CSS2 中 ,设计 师 为 了 实现 圆 角 设计 ,需要 花费 更 多 的 时 间 。 在 CSS 3 中 则 可 以 直 
接 使 用 border-radius 属性 创建 圆 角 边框 。 该 属性 可 以 包含 两 个 参数 : 第 一 个 值 表 示 圆 角 
的 水 平 半 径 , 第 二 个 值 表 示 圆 角 的 垂直 半径 ,其 标准 的 书写 方式 为 “border-radius:10px/ 
20px;”, 如 果 水 平 半径 和 垂直 半径 相同 ,也 可 以 书写 为 “border-radius:10px;”。 

此 外 ,如 果 想 要 为 矩形 设置 四 个 不 同 的 圆 角 半 径 , 则 不 能 使 用 斜 杠 方式 来 定义 规则 ， 
而 是 要 书写 为 “border-radius:10px 20px 30px 40px;”。 


2. box-shadow 属性 


在 CSS 3 中 ,box-shadow 属性 用 于 向 方 框 添加 阴影 。box-shadow 属性 的 使 用 方法 
如 下 。 


box- shadow: length length length color; 


其 中 ,前 三 个 length 分 别 指 阴影 离开 对 象 的 横向 距离 .阴影 离开 对 象 的 纵向 距离 .阴影 离 
开 对 象 的 模糊 半径 ,而 color 指 的 是 阴影 的 颜色 。 


3. border-image 属性 

CSS 3 的 border-image 属性 ,可 以 方便 设计 师 使 用 图 片 来 创建 边框 。 该 属性 会 让 浏 
览 器 在 显示 图 像 边 框 时 ,自动 将 所 使 用 的 图 像 分 割 为 9 部 分 进行 处 理 , 不 再 需要 设计 师 人 
工 处 理 。 

border-image 属性 标准 的 使 用 方法 如 下 。 


border- image: url 图像 的 路 径 ) ABCD 


其 中 ,A、B、C、D 四 个 参数 表示 浏览 器 对 图 像 分 割 时 的 上 边 距 、 右 
边 距 、 下 边 距 和 左边 距 , 如 图 3-35 所 示 。 

【案例 3-10】 盒子 模型 相关 属性 。 

@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 一 body 二 
与 二 /body 之 标签 内 部 增加 如 下 代码 。 

<div ic "boxl" class= "box"> boxl< /div> 

<div id= "box2" class= "box>box2< /div> 

<div id "box3" class= "box"> box3< /div> 


@ 在 当前 页 面 的 一 head> 与 二 /head 盖 标签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


图 3-35 参数 示意 图 


<style type= "text/css"> 
box { 
width: 100px; 
height: 100px; 
Padding: 10px; 
border: # FO0 solid 26rx; /x* 这 里 边框 设置 为 26 像 素 */ 


- 


一 
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margin— bottam: 20px; 


#boxl { 

border- radius: 40px/30px; /< 设置 盒子 圆 角 边框 * / 

bax- shadow: 10px 10px 10px gray; /* 设置 阴影 效果 和 阴影 颜色 * / 
#box2 { 

border- radius: 20px 30px 60px 80px; /* 设置 盒子 圆 角 边框 * / 

bax- shadow: 10px 10px 0 gray; /* 设置 阴影 效果 和 阴影 颜色 x / 
#box3 { 

border- image: url (border.png) 26 26 26 26; 

/* 设 置 盒子 边框 图 像 * / 


< /style> 
@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-36 所 示 。 


€ 会 GDfle/W/EAQ 安 | 三 


图 3-36 ”案例 3-10 的 预览 效果 


3.5 常见 的 CSS 选择 器 


选择 器 是 CSS 的 重要 内 容 , 使 用 它 可 以 大 幅 提 高 开发 人 员 修改 样式 的 工作 效率 。 由 
于 选择 器 的 内 容 非 常 多 ,本 节 将 介绍 CSS 2 中 常见 的 选择 器 ,以 及 CSS 3 中 部 分 新 增 的 选 
择 器 ,而 选择 器 的 更 多 内 容 将 在 后 续 章 节 配 合 着 案例 进行 介绍 。 

目前 ,大 多 数 网 站 的 开发 人 员 习 惯 使 用 元 素 的 class 属性 服务 于 样式 ,而 class 属性 可 
以 使 用 在 文本 框 中 ,也 可 以 使 用 在 按钮 中 ,这 样 在 洋洋 酒 酒 的 CSS 代码 中 显得 非常 混乱 ， 
修改 样式 时 也 不 方便 。 在 CSS 3 中 ,倡导 使 用 选择 器 来 将 样式 与 元 素 直接 绑 定 起 来 ,这 样 
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在 样式 表 中 什么 样式 与 什么 元 素 相 匹配 变 得 一 目 了 然 。 不 仅 如 此 ,开发 人 员 还 可 以 通过 
选择 器 实现 各 种 复杂 的 指定 ,同时 减少 样式 表 的 代码 书写 量 。 


3.5.1 通配符 选择 器 与 类 型 选择 器 


1. 通配符 选择 器 

通配符 选择 器 用 * "进行 表示 ,用 于 清理 标签 的 默认 样式 。 如 果 单 独 使 用 ,其 作用 范 
围 是 页 面 中 所 有 元 素 。 而 在 实际 工作 中 ,由 于 通配符 选择 器 比较 耗费 资源 ,所 以 不 提倡 直 
接 使 用 该 选择 器 。 


2. 类 型 选择 器 

类 型 选择 器 是 指 以 网 页 中 已 有 标签 类 型 作为 名 称 的 选择 器 ,如 body、header 和 op 等 。 

【案例 3-11】 通配符 选择 器 与 类 型 选择 器 。 

Oz 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 二 body 二 与 二 /body 二 标签 内 
部 增加 如 下 代码 。 


<h2> 通 配 符 选择 器 与 类 型 选择 器 < /h2> 
<Fz () 通配符 选择 器 用 * * ”进行 表示 ,用 于 统一 标签 的 默认 样式 。< /p> 
<Pz (2) 类 型 选择 器 指 的 是 以 网 页 中 < span> 已 有 标签 类 型 < /span> 作 为 名 称 的 选择 器 。< /p> 


@ 在 当前 页 面 的 二 head 记 与 二 /head 二 标签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 
引 才 
margin: 07 
Padding: 0; 
border: 0; 
} /* 初始 化 页 面 所 有 标签 的 默认 样式 * / 
h2 {font- family: "黑体 ")} /* 设置 标题 字体 为 黑体 一 一 类 型 选择 器 * / 
px* {font- size: 30px;} 
/* 设置 p 标 签 内 的 所 有 元 素 字 体 大 小 为 30px 一 一 类 型 选择 器 与 通配符 选择 器 的 混合 使 用 * / 


< /style> 
@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 癌 通配符 选择 器 与 尖 H 泛 x 二 
图 3-37 所 示 。 ES 三 
3.5.2 ”ID 选择 器 与 类 选择 器 ee 
1. ID 选择 器 人 已 有 标 


ID 选择 器 书写 时 以 “#” 开 头 。 对 于 一 个 | 签 类 型 作为 名 称 的 竺 器 . 
HTML 5 文档 来 说 ,其 中 的 每 一 个 标签 都 可 以 使 
用 i 二 "" 的 形式 进行 一 个 名 称 指派 ,但 需要 注意 ， 图 337 案例 3-11 的 预览 效果 
文件 中 id 属性 具有 唯一 性 是 不 可 以 重复 的 。 

2. 类 选择 器 

类 选择 器 通过 直接 引用 元 素 中 类 属性 的 值 而 产生 效果 ,这 个 应 用 前 面 总 是 有 一 个 句 
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点 “.”, 这 个 句点 用 来 标识 一 个 类 选择 器 ,类 名 可 以 随意 命名 ,但 最 好 根据 元 素 的 用 途 来 定 
一 个 有 意义 的 名 称 。 
ID 选择 器 与 类 选择 器 最 大 的 区 别 在 于 ,前 者 定义 的 CSS 规则 , 仅 作 用 于 一 个 元 素 ， 
而 后 者 定义 的 CSS 规则 ,可 以 同时 作用 于 不 同类 别 或 多 个 元 素 。 
【案例 3-12】 ID 选择 器 与 类 选择 器 。 
OO 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 二 body 二 与 二 /body 二 标签 内 
部 增加 如 下 代码 。 


<div id "box lm> 
< 了 Fr> ID 选择 器 是 以 *# ?开头 ,每 个 标签 都 可 以 使 用 < span class= "size"> id- ""< /span> 的 形式 进 
行 一 个 名 称 指派 。< /p> 
</div> 
<div class= "size" > 
< 本 类 选择 器 通过 直接 引用 元 素 中 类 属性 的 值 而 产生 效果 。 这 个 应 用 前 面 总 是 有 一 个 句点 
。< /> 
</div> 


@ 在 当前 页 面 的 二 head 记 与 三/head 二 标签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 


border: Srx # 03F solid; 
} /* 创建 名 为 "box_1" 的 规则 ,设置 宽度 ,增加 蓝 色 边框 。* / 
.size { 
font- size: 24px; 
font- style:italic; 
} 
/* 创建 名 为 size 的 类 规则 ,改变 字体 大 小 ,并 设置 为 斜体 。* / 
< /style> 


@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-38 所 示 。 


类 秦汉 器 古 巡 让 花 绰 房 元 芮 办 类 属 华 扒 
丰 PR 训 介 磋 用 所 压 点 在 育 一 


图 3-38 ID 选择 器 与 类 选择 器 预览 效果 
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3.5.3 包含 选择 器 与 群 组 选择 器 


1. 包含 选择 器 
当 用 户 想 要 选取 X 元 素 下 的 子 元 素 Y 时 ,包含 选择 器 就 能 发 挥 作用 。 这 种 方式 的 选 
择 器 将 选取 其 下 所 有 匹配 的 子 元 素 , 且 忽视 层级 关系 ,示例 代码 如 下 。 


1i a {text- decoration:none;} /* 此 规则 作用 的 对 象 是 1 元 素 所 包含 的 a 元 素 * / 


2. 群 组 选择 器 

当 用 户 需要 对 一 组 不 同 的 标签 进行 相同 样式 的 指派 时 , 群 组 选择 器 就 派 上 了 用 场 。 
群 组 选择 器 使 用 逗号 对 选择 器 进行 分 隔 , 这 样 书写 的 优点 在 于 同样 的 样式 只 须 书 写 一 次 ， 
减少 了 代码 书写 量 ,示例 代码 如 下 。 

body,ul, li,a,plmargin:0;padding:0;} /* 此 规则 将 作用 于 多 个 元 素 上 面 * / 

【案例 3-13】 包含 选择 器 与 群 组 选择 器 。 

Oz@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 一 body 二 与 一 /body 二 标签 内 
部 增加 如 下 代码 。 

<hl> 这 里 是 由 标签 内 的 <span> 文 字 < /span>< /hl> 

< 户 这 里 是 p 标 签 内 的 文字 < /p> 


<p class= "myclass"> 这 里 是 带 有 myclass 类 属性 的 p 标 签 内 的 文字 < /p> 
<div id "main"> 这 里 是 带 有 记 属 性 的 div 元 素 内 的 文字 < /div> 


@ 在 当前 页 面 的 二 head> 与 二 /head> 标 签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


<style type= "text/css"> 


body, hl,p { 

margin: 0; 

Padding: 0; 
} /* 群 组 选择 器 ,常用 于 页 面 元 素 初始 化 * / 
hl span {font- size: 30px;} /* 设 置 字体 大 小 一 一 包含 选择 器 * / 


hl, p, .myclass, #main { 
font- size: 16pxy 
border: 2px solid # FOO; 
Iargin- bottam: 10px; 
} /* 设置 字体 大 小 和 边框 ,以 及 盒 模型 相关 属性 一 一 群 组 选择 器 * / 


</style> 
@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效 和 
果 如 图 3-39 所 示 。 
3.5.4 属性 选择 器 重量 5 标本 内 的 文字 


属性 选择 器 可 以 根据 对 象 是 否 具 有 某 个 
属性 ,或 者 该 属性 是 否 有 某 个 特定 值 来 决定 
是 否 要 应 用 样式 。 在 CSS 3 中 ,增加 了 三 个 3-39 包含 选择 器 与 群 组 选择 器 预览 效果 
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2 属性 选择 器 ,这 使 得 属性 选择 器 有 了 通配符 的 概念 。 下 面 是 CSS 2 和 CSS 3 中 常见 的 属 


性 选择 器 ,其 中 下 表示 选择 器 (可 以 省 略 不 写 ) ,attr 表示 属性 名 称 ,val 表示 属性 值 。 

E[attr]: 选择 所 有 包含 attr 属性 的 元 素 ( 无 论 值 如 何 ) 。 

ELattr 一 val]: 选择 所 包含 attr 属性 , 且 attr 值 为 val 的 元 素 。 

E[attr* 二 val]: 选择 所 有 包含 attr 属性 , 且 attr 值 以 val 开头 的 元 素 。 

E[attr$ 一 val]: 选择 所 有 包含 attr 属性 , 且 attr 值 以 val 结束 的 元 素 。 

E[attr * 一 val]: 选择 所 有 包含 attr 属性 , 且 attr 值 中 包含 val 的 元 素 。 

【案例 3-14】 属性 选择 器 。 

O@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 二 body 二 与 二 /body 二 标签 内 
部 增加 如 下 代码 。 


<hl> 属 性 选择 器 < /hl> 
<nav id- "yz1"> 演 示 文 本 yzl 
<u> 
<li><a href= "world 文 档 .docx"> world 文 档 < /a></1i> 
<li><ahref= "pt 文档 .gptx">ppt 文 档 </a></1i> 
</u> 
< /nav> 
<div id "yz2"> 演 示 文 本 yz2< /div> 
<div id "subyz2- 1"> 演 示 文 本 subyz2- 1< /div> 
<div id "subyz2- 2"> 演 示 文 本 subyz2- 2< /div> 


@ 在 当前 页 面 的 二 head> 与 二 /head 之 标签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 
1 {list- style: none;}】 ”/* 清除 列表 的 默认 样式 * / 
alhref$ = "dbcx"] { 

background: url (dpc.Png) no- repeat left oanter; 

padding- left: 25px7 

/* 匹配 href 属性 中 ,以 dbcx 结 尾 的 元 素 ,为 其 设置 缩 进 和 背景 图 * / 

afhref$ = "EPE ] { 

background: url (PE.Png) no- repeat left osnter; 

Padding- left: 25px7 


/x* 匹配 href 属 性 中 ,以 Fptx 结 尾 的 元 素 ,为 其 设置 缩 进 和 背景 图 * / 
id= Yz1] { background:# FCO;} 
/< 匹配 这 属性 中 属性 值 为 yzl 的 元 素 ,设置 背景 色 为 检 色 * / 
idx =yz] { color:red;} 
/* 匹配 这 属性 中 包含 指定 字符 yz 的 所 有 元 素 ,设置 文本 颜色 为 红色 * / 
idq= sub] { font- size:24px;} 
/* 匹配 这 属性 中 以 字符 sb 开头 的 元 素 , 设 置 字体 大 小 为 24 像 素 * / 
idq$s =\-2] { font- style:italic;} 
/* 匹配 记 属 性 中 以 指定 字符 “- 宅 结尾 的 元 素 , 设 置 字体 为 斜体 * / 
</style> 


@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-40 所 示 。 
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图 3-40 属性 选择 器 预览 效果 


3.6 ”过程 指导 一 一 淘宝 店铺 周年 庆 专题 页 面 


本 节 将 使 用 Dreamweaver CS6 软件 ,结合 相关 的 CSS 基本 内 容 , 向 读者 详细 介绍 网 
页 前 端 设 计 师 是 如 何 将 效果 图 转化 为 网 页 的 ,请 读者 着 重 体会 从 创建 页 面 到 制作 完成 的 
整个 过 程 。 


3.6.1 过 程 分 析 


本 节 的 任务 是 完成 “淘宝 店铺 周年 庆 专 题 页 面 "的 制作 ,其 最 终 页 面 效果 如 图 3-41 所 
示 。 该 网 站 以 周年 店庆 为 主题 ,选择 红色 作为 基本 色 , 从 页 面 整 个 布局 来 看 ,可 以 分 为 头 
部 区 域 .banner 区 域 . 主 体内 容 区 域 和 底部 的 版 权 区 域 。 其 中 主体 内 容 区 域 又 包含 4 个 
活动 内 容 。 通 过 对 页 面 的 仔细 观察 以 及 成 熟 的 思考 ,将 页 面 的 布局 规划 图 展示 出 来 ,如 
图 3-42 所 示 。 


3.6.2 步骤 详解 


1. 创建 站 点 

(1) 启动 Dreamweaver CS6 ,执行 “站 点 ”新 建站 点 ”命令 ,显示 “站 点 设置 对 象 " 对 
话 框 ,如 图 3-43 所 示 。 

(2) 在 此 对 话 框 左 侧 列表 中 选择 “站 点 ”选项 ,并 在 右 侧 “ 站 点 名 称 ” 文 本 框 中 输入 “ 电 
子 竞技 活动 页 面 ", 然 后 单 击 贸 图 标 按钮 ,为 本 地 站 点 文件 夹 选择 存储 路 径 。 最 后 , 单 击 
“保存 ”按钮 ,完成 本 地 站 点 的 创建 。 

(3) 在 “文件 ”面板 中 站 点 根 目录 下 分 别 创建 用 于 放置 图 片 的 images 文件 夹 和 放置 
CSS 文件 的 style 文件 夹 。 

(4) 将 所 需 图 片 素材 复制 到 站 点 的 images 文件 夹 内 ,如 图 3-44 所 示 。 
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图 3-41 淘宝 店铺 周年 庆 专题 页 面 预览 效果 图 3-42 淘宝 店铺 周年 庆 专 题 页 面 
布局 示意 图 


Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。Dreamweaver 


是 EE 下 二 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
[淘宝 店铺 局 年 庆 专题 9 页 


图 3-43 设置 创建 的 站 点 
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3-44 ”创建 文件 夹 


2. 创建 空白 文档 

(1) 执行 菜单 栏 中 的 “文件 ”一 “新 建 " 命 令 , 显 示 “ 新 建文 档 ”对 话 框 。 

(2) 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页 面 类 型 "中 选择 HTML 类 型 ,然后 在 “ 布 
局 " 列 中 选择 “无 ”类 型 。 

(3) 在 “文档 类 型 "下 拉 菜 单 中 选择 HTML 5 选项 ,如 图 3-45 所 示 。 最 后 单 击 “ 创 建 ” 
按钮 , 即 可 创建 一 个 空白 文档 。 
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图 3-45 设置 文档 类 型 
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(4) 将 该 网 页 保存 在 根 目录 下 ,并重 命 名 为 index. html, 如 图 3-46 所 示 。 


3. 创建 CSS 文档 

(1) 执行 菜单 栏 中 的 “文件 ”一 “新 建 "命令 ,显示 “新 建文 档 ” 对 话 框 。 

(2) 选择 对 话 框 左 侧 的 “空白 页 "类别 ,从 “页 面 类 型 " 列 选择 CSS 类 型 ,然后 单 击 “ 创 
建 "按钮 , 即 可 创建 一 个 CSS 空白 文档 。 

(3) 将 此 外 部 CSS 文档 保存 在 style 文件 夹 下 ,并 重 命名 为 style. css, 如 图 3-47 
所 示 。 
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图 3-46 新建 空白 网 页 图 3-47 创建 CSS 文 档 


4. 将 CSS 文档 链接 至 页 面 

(1) 打开 index. html 文档 ,在 Dreamweaver CS6 中 执行 “窗口 ”一 “CSS 样式 ”命令 ， 
打开 “CSS 样式 ?面板 , 单 击 面板 底部 的 l 锣 图 标 , 此 时 弹出 “链接 外 部 样式 表 ” 对 话 框 。 

(2) 在 此 对 话 框 中 , 单 击 “ 浏 览 ” 按 钮 ,将 外 部 样式 文件 style. css 链接 到 index. html 
页 面 中 ,如 图 3-48 所 示 。 

(3) 此 时 ,软件 界面 显示 两 个 文件 已 经 链接 ,如 图 3-49 所 示 。 用 户 单 击 某 个 文件 ,可 
以 在 这 两 个 文档 之 间 相 互 切换 。 


文件 /VBL@E): style/style. css 
添加 为 : 回 树 接 由 性 


日 SO 
提 休 四): 
您 也 可 以 输入 号 分 卫 的 媒体 类 型 列表 。 WO 
Tireanvearer 的 区 例 检 式 才 可 以 帮助 起 步 。 — te css 
3-48 将 CSS 文档 链接 至 页 面 3-49 ”两 个 文件 已 经 成 功 链接 


5. 页 面 初始 化 
进入 style. css 的 编辑 状态 ,创建 初始 化 规则 ,其 CSS 规则 内 容 如 图 3-50 所 示 。 
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6. 页 面 后 续 制作 
(1) 在 index. html 文件 的 源 代码 编辑 状态 中 ,手动 创建 如 图 3-51 所 示 的 页 面 基本 结 
构 。 这 里 建议 手动 创建 的 目的 是 希望 读者 熟知 页 面容 器 相互 嵌 套 的 结构 和 各 种 元 素 的 使 


margin: 0; Fboay> 

padding: 0; |<header id="page header"> 

border: 0; <h1> 宇 泽 电 器 专营 店 </h1> 
</header> 


body { div id="banner"></div> 
width: 100%;/*" 设 置 页 面 宽度 为 浏览 器 宽度 的 100%*/ |<section> </section> 
color: #FFF; |<roorer id="page_ footer"> 
font-size: 16px; <p>&copy;2015 AwesomeCo.</p> 
font-family: "微软 雅 黑 "; <p> 店 铺设 计 : 宇 泽 互 联 </p> 
background: #b70707;/* 设 置 背 景色 */ |</footer> 


(</body> 


图 3-50 页面 初 始 化 规则 图 3-51 页 面 基本 结构 


(2) 进入 style. css 的 编辑 状态 ,创建 相关 容器 的 CSS 规则 ,如 图 3-52 所 示 。 


age header 1 
margin: 0 auto;/* 设 置 当 前 容器 水 平 居中 */ 
width: 950pxz/* 该 宽度 与 载 入 图 片 宽度 相同 */ 
heighc: 103px;/* 该 高 度 与 载 入 图 片 高 度 相同 */ 
background: url(../images/header.jpg) no-repeat;/* 设 置 载 入 图 片 的 地 址 */| 
》 
#page_header hl { text-indent: -9999px;/* 将 文字 隐藏 ， 有 利于 搜索 优化 */ ) 
#banner { 
margin: 0 auto;/* lee 
background: url( ges/banner_ bg. Center no-repea 
width: 100%; 上 应 该 设置 为 各 器 训 度 / 
height: 500px; 
} 
#page_footer { 
width: 950px; 
margin:10px auto;/* 设 置 当前 容器 水 平 居 中 ， 且 距离 其 他 容器 上 下 距离 为 0 像素 */ 
text-align: center;/* 设 置 版 权 内 容 居中 */ 


图 3-52 页 面 基本 结构 的 CSS 规则 


(3) 保存 当前 页 面 ,预览 后 的 效果 如 图 3-53 所 示 。 

(4) 进入 index. html 文件 的 源 代码 编辑 状态 ,在 二 section 二 和 二/section 二 之 间 搬 入 
相关 页 面 代码 ,如 图 3-54 所 示 。 

(5) 进入 style. css 的 编辑 状态 ,创建 相关 容器 的 CSS 规则 ,如 图 3-55 所 示 。 保 存 当 
前 页 面 ,预览 后 即 可 看 到 最 终 效果 。 

说 明 : 

G@ 本 节 详 细 叙 述 了 网 页 制作 的 工作 过 程 ,其 中 的 CSS 规则 有 很 大 一 部 分 属性 对 于 初 
学 者 而 言 比较 难以 理解 。 这 里 重点 不 是 让 读者 一 次 性 记忆 这 么 多 属性 ,而 是 让 读者 熟悉 
这 种 制作 网 页 的 工作 方式 。 

@ Dreamweaver CS6 并 非 没 有 可 视 化 插入 各 类 容器 的 方法 ,而 本 节 着 重 强调 了 手动 
输入 代码 的 过 程 ,是 希望 培养 的 是 读者 养 成 手动 输入 代码 的 习惯 ,为 后 期 能 力 提 高 打下 
基础 。 


、 
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宇 泽 电器 专营 店 


里 日 加 


司 秆 | 天 曲 


市 人 穿 亩 从 


©2015 AwesomeC 


width: 950px 
height: 50px 

margin: 10px auto 

background: url(../images/re header_ bg.jpg) no-repeat; 
text-align; center;/* 设 置 文字 水 平 居中 */ 
font-size: 30px;/* 设 置 文字 大 小 */ 


section> line-height: 50px;/* 设 置 行 高 ， 使 得 文字 一直 居中 */ 
<header class="re_header"> 稳 柜 推荐 </header> 
<article id="art 1"> #a 
<div class="content left"> wideh: 950px 
<p>42 寸 LED 智 能 3D 电 视 </p> height: 405px. 
<p> 汇 品质 感 明 星之 选 </p> margin: 10px auto 
<p>Android4 .0 全 开放 平台 </p> background: url(../images/art 1.jpg) no-repeat; 


<p> 全 山 云 存储 ， 畅 想 云 庙 生活 </py 
<p> 语 音 精灵 2 .0</p> po 


</div> color: #502828 
</article> padding-top: 160px; 
<arricle id="art 2"> padding-left: 200px; 
<div class="content_right"> 
<p>TOUCH 智 能 控制 </p> #art_2 
<p> 原 生态 Android4.0</p> width: 950px 
<p> 内 置 NIFI</p> height: 405Px 
<p> 语 音 精 灵 2 . 0</p> margin: 10px auto 
</div> background: urll(../images/art 2.jpg) no-repeat; 
</article> 
<header class="re_header">TCL 推 荐 </header> ntent_r 
<article id="art 3"> color: #502828 
<div class="content right"> padding-top: 190px: 
<p> 一 屏 双 显 各 得 其 乐 c7p> padding-left: S70px; 
<p>Android4 .0+ 操 作 系统 </p> 
<p> 无 边框 设计 ， 视 野 更 广 </p> #art_3 
</div> width: 950px 
</article> height: 405px 
<arricle id="art 4"> margin: 10px auto; 
<div class="content left"> background: url(../images/art_3.jpg) no-repeat; 
<p>50 寸 LED 智 能 3D 电 视 </p> 
<p> 多 屏 互动 ， 全 能 浏览 器 </p> fart_4 
<p> 至 苯 蓝光 ，AI 变 频 系统 </p> width: 950px; 
<p> 魔 方 影音 ， 音 画 同步 </p> height: 405px: 
</div> margin: 10px auto; 
</article> background: url(../images/art 4.jpg) no-repeat: 
/section> 


图 3-54 在 section 元 素 内 插入 代码 图 3-55 ”section 元 素 内 各 元 素 的 CSS 规则 
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3.7 自主 任务 一 一 中 秋 茶 相伴 ?淘宝 店铺 专题 销售 页 面 


根据 3. 6 节 的 案例 制作 ,读者 了 解 和 掌握 了 创建 网 页 文件 的 工作 流程 。 通 过 本 节 实 
训 的 训练 ,可 以 进一步 掌握 CSS 布局 页 面 的 方法 ,页 面 最 终 效果 如 图 3-56 所 示 ,布局 如 
图 3-57 所 示 。 


header id="page_header" 


div id="nav" 


Section id="content" 


div id="con_head" 


div id="con_main" 


divid="col 1" 


div id="col 2" 


div id="col 3" 


footer id="page_footer" 


图 3-56 “中 秋 茶 相伴 ”页 面 预 览 效 果 图 3-57 “中 秋 茶 相伴 ”页 面 布局 示意 图 

3.8 习题 

1. Dreamweaver CS6 的 常用 功能 面板 主要 包括 哪些 内 容 ? 

2. 什么 是 设计 视图 、 代 码 视 图 和 拆 分 视图 ? 

3. 将 CSS 文档 链接 到 页 面 的 方法 有 哪些 ? 

4. 简 述 什么 是 盒子 模型 。 

5. CSS 为 开发 者 提供 多 样 的 选择 器 ,请 问 属性 选择 器 E[attr$ 二 valj 的 含义 是 
什么 ? 

6. 在 本 地 计算 机 中 创建 站 点 名 称 为 My Web 的 站 点 ,并 在 该 站 点 内 创建 名 为 images 


和 style 的 文件 夹 ; 在 站 点 内 部 创建 index. html 和 div. css 文件 ,并 将 这 两 个 文件 链接 起 
来 ;向 站 点 image 文件 夹 内 复制 多 张 图 像 , 练 习 移 动 、 删 除 、 粘 贴 等 操作 。 
7. 观察 图 3-58 所 示 的 网 页 ,分析 其 中 的 布局 ,运用 本 章 知识 将 该 网 页 制作 出 来 。 
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= 的 背 泪 于 里 。 我 人 自己 动 
i 风衣 二 和 我们 站 这 种 白 


享 其 
水 两 ， 一 上 染 就 训 | 巴巴 请 看 导 祈 ， Ss ee 
又 i a 事先 来 信 说 : “我 们 要 游 
i 本 来 前 晚 是 月 当 和 


不 大 见 人 四 Fa 
是 山上 松林 里 的 风声 ， 跟 天 上 一 只 两 
所 人 书记 让 看 大 路 


Pe 边 时 : 人 大 家 里 却 老 是 春天 。 有 一 | 人 要 让 主人 生产 的 天 上 和 着 Ea 
二 个， 三 张 答 都 带 秆 天 省 区 笑 地 向 着 我 。 似 平台 州 空 空 的 ， 只 有 我 们 四 人 ; 1 也 只 有 我 们 四 人 。 那 时 是 民 
加 和 = 委 取 未 里 出 来 ， 清 自在 。 现 在 她 死 了 快 四 年 了 ， 芒 却 汪 老 记 着 好 导入 芝 的 影 订 
无 论 怎么 岭 ， 大 风 大 雪 ， 想 到 这 些 ， 我 心 上 总 是 温暖 的 。 


Copyright @ 2015 字 泽 互联 All Rights Reserved 
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【本 章 导 读 】 

网 页 中 的 文本 是 传递 信息 的 主要 途径 ,而 图 像 又 是 吸引 访问 者 不 可 或 缺 的 基本 要 素 。 
本 章 主要 向 读者 介绍 网 页 中 文本 元 素 和 图 像 元 素 的 编辑 方法 ,以 及 如 何 使 用 CSS 规则 控 
制 页 面 中 的 文本 和 图 像 ,使 之 呈现 出 多 样 的 外 观 。 

【学 习 目 标 】 

要 掌握 编辑 文本 和 超 链接 的 基本 操作 ; 

避 认 知 并 熟练 应 用 CSS 控制 文本 的 外 观 ; 

二 掌握 插入 图 像 的 基本 操作 ,以 及 与 图 像 相关 的 CSS 属性 ; 

避 能 够 熟练 运用 CSS 的 内 容 实现 图 文 混 排 效果 。 


4.1 文本 


网 页 中 包含 信息 最 多 的 就 是 文本 ,对 文本 进行 良好 的 控制 和 美化 ,是 决定 网 页 是 否 美 
观 和 风格 是 否 统一 的 关键 。 


4.1.1 插入 文本 


在 Dreamweaver CS6 中 为 页 面 插入 文本 的 常用 方法 有 两 种 。 


1. 直接 输入 文本 

将 光标 定位 在 “设计 ”视图 中 需要 插入 文本 的 地 方 , 通 过 键盘 直 
和 文本。 这 里 特别 提示 几 种 操作 方式 。 

(1) 换行 eal 

在 输入 文本 的 过 程 中 ,如 果 直 接 按 下 Enter 键 ”| 直接 按 下 <Enter》 键 进行 换行 
进行 换行 , 则 行 间 距 较 大 ,这 是 因为 软件 自动 生成 了 ”| 直接 按 下 <Enter> 键 进行 换行 
一 个 段落 。 直接 按 下 《Enter> 键 进行 换行 

如 果 使 用 Shift 十 Enter 键 进行 换行 , 则 显示 为 ”| 使 用 组 合 键 《Shi fttEnter》 进行 换行 
正常 行 间距 , 其 原因 在 于 软件 自动 插入 了 一 个 “| 名 级 是 人 anter 于 5 执 和 
去 br> 标 签 ,从 而 使 换行 后 行 间 距 较 小 .如 图 4-1 
所 示 。 图 4-1 文本 的 换行 
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(2) 输入 多 个 空格 

默认 状态 下 ,Dreamweaver CS5 中 不 能 连续 输入 多 个 空格 ,只 能 输入 一 个 。 如 果 用 
户 想 要 输入 多 个 空格 ,需要 将 输入 法 提示 框 上 的 “半角 ” 改 为 “全 角 ”, 或 者 使 用 Ctrl 十 
Shift 十 Space 键 增加 空格 。 


2. 复制 粘贴 
从 其 他 应 用 程序 中 复制 文本 (快捷 键 为 Ctrl 十 C) ,然后 切换 到 Dreamweaver 中 ,将 插 
入 点 定位 在 “文档 ”窗口 的 “设计 ?视图 中 ,执行 粘贴 操作 (快捷 键 为 Ctrl 十 V) 即 可 。 


3. 批量 替换 

“批量 替换 ?功能 能 够 帮助 用 户 查 找 并 蔡 换 页 面 中 指定 的 内 容 , 具 体操 作 如 下 。 

(1) 启动 Dreamweaver CS6 ,并 打开 正在 编辑 的 网 页 文件 。 

(2) 在 菜单 栏 中 执行 “编辑 ”~* 查 找 和 蔡 换 " 命 令 ,或 者 按 Ctrl 十 F 键 ,这 时 弹出 “ 查 
找 和 替换 ”对 话 框 。 

(3) 在 此 对 话 框 中 的 “查找 范围 ”下拉 菜单 中 选择 要 搜索 的 范围 ,这 里 选择 “当前 文 
档 ” 选 项 ,如 图 4-2 所 示 。 


选 页 : 加 区 分 大 小 配 @@ 同 知 略 空白 四) 
口 全 字 可 村 中 


(4) 在 “搜索 ?下 拉 菜 单 中 选择 搜索 类 型 ,包括 * 源 代码 ”文本 ”文本 (高 级 )” 和 "指定 
标签 4 种 选择 。 

(5) 在 “查找 "文本 框 中 输入 要 查找 的 文本 内 容 , 在 “替换 "文本 框 内 输入 要 替换 的 内 
容 , 然 后 单 击 “ 查 找 下 一 个 ”按钮 ,软件 会 自动 查找 到 相关 内 容 。 最 后 单 击 “ 替 换 " 按 钮 或 
“替换 全 部 ”按钮 ,进行 蔡 换 操作 。 


4.1.2 创建 超 链 接 

超 链接 是 指 从 一 个 网 页 指向 另 一 个 目标 的 连接 关系 ,这 个 目标 可 以 是 一 个 网 页 ,也 可 
以 是 相同 网 页 上 的 不 同位 置 , 还 可 以 是 一 个 图 片 ,一 个 电子 邮件 地 址 ,甚至 是 一 个 应 用 
程序 。 

1. 文本 链接 


超 链接 根据 目标 的 不 同 ,又 可 以 分 为 内 部 链接 、 外 部 链接 和 空 链接 。 这 里 通过 实例 演 
示 创 建 超 链 接 的 过 程 。 
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【案例 4-1】 创建 文本 链接 。 

@ 启动 Dreamweaver CS6 ,新建 空 和 HTML 5 文档 ,在 页 面 中 输入 一 些 文字 ,此 时 
页 面 结 构 如 图 4-3 所 示 。 

@ 选择 第 一 行文 字 , 在 菜单 栏 中 执行 “插入 ”一 “超级 链接 ”命令 ,或 者 在 “插入 ”面板 
的 “常用 ”类 别 中 , 单 击 “ 超 级 链接 "按钮 ,此 时 打开 如 图 4-4 所 示 的 对 话 框 。 


文本 方法 一 : 通过 菜单 创建 超 链接 
- 


boay> 
<p> 方 法 一 : 通过 菜单 创建 超 树 接 </p> 
<p> 方 法 二 : 通过 属性 检查 器 创建 超 链 接 </p>| 


[</body> 


图 4-3 当前 页 面 结构 图 4-4 “超级 链接 "对话 框 


@ 在 该 对 话 框 的 “文本 ”选项 中 ,输入 或 修改 链接 的 文本 ,然后 在 “链接 "文本 框 内 输 
入 要 链接 到 的 文件 的 名 称 。 

@ 在 “目标 ”下拉 菜单 中 选择 一 种 用 于 显示 链接 文件 的 方式 。_blank 指 的 是 将 链接 
的 文件 加 载 到 一 个 未 命名 的 新 浏览 器 窗口 中 ;_parent 指 的 是 将 链接 的 文件 加 载 到 含有 该 
链接 的 父 窗 口中 ;_self 指 的 是 将 链接 的 文件 加 载 到 该 链接 所 在 的 同一 窗口 中 ;_top 指 的 
是 将 链接 的 文件 加 载 到 整个 浏览 器 窗口 中 。 

@ 在 “标题 "文本 框 中 输入 链接 的 标题 文字 ,此 处 的 文字 内 容 , 会 在 光标 悬 停 在 超 链 
接 上 时 显示 。 

@@“ 访 问 键 ? 选 项 用 于 设置 在 浏览 器 中 选择 该 链接 的 等 效 键盘 键 ，Tab 键 索引 ? 选 项 
用 于 设置 Tab 键 顺序 的 编号 ,这 里 可 以 不 做 任何 设置 。 

@ 待 所 有 设置 完成 后 , 单 击 “确定 "按钮 即 可 为 文本 添加 超级 链接 。 

@ 选择 设计 视图 中 的 第 二 行文 字 , 单 击 属性 面板 中 “链接 " 右 侧 的 文件 夹 图 标 
园 , 在 弹出 对 话 框 中 选择 一 个 文件 ,或 者 在 “链接 "文本 框 内 输入 文档 路 径 和 文件 名 ， 
再 或 者 单 击 图 图 标 不 放 , 拖 中 出 一 个 箭头 ,将 其 指向 到 目标 文档 即 可 建立 超 链接 ,如 
图 4-5 所 示 。 

@ 最 后 ,通过 浏览 器 预览 可 以 发 现 添加 了 超 链接 的 文本 颜色 发 生 了 变化 ,而 且 文 本 
下 面 也 添加 了 一 条 下 划 线 ,如 图 4-6 所 示 。 

需要 说 明 的 是 ,如 果 和 暂时 希望 建立 一 个 未 指定 目标 的 空 链接 , 则 在 “链接 "文本 框 内 输 
人 ”“ 井 ?” 即 可 。 

2. 邮件 链接 

邮件 链接 是 一 种 特殊 的 链接 , 单 击 这 种 链接 ,可 以 自动 启动 电子 邮件 程序 。 


3. 锚 链 接 
浏览 网 页 时 ,用 户 肯 定 都 有 这 种 体验 : 当 浏 览 的 页 面 内 容 较 多 ,需要 连续 滚动 多 次 才 
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图 4-5 通过 属性 检查 器 创建 超 链接 


能 完整 阅读 时 ,网 页 设计 者 通常 会 增加 诸如 ”返回 页 面 顶 部 ”的 超 链接 ,为 用 户 提供 方便 。 
这 种 用 户 体验 就 是 采用 锚 链接 完成 的 。 


<article > 

<h2> 荷 娘 月 色 (节选 ) </h2> 
p> 四 天天 -</p> 
</article> 

<foocer><a>>> 返 回 页 面 顶部 </a>; 时: ;<a> 信 息 反馈 </a></footer> 


图 4-6 创建 超 链接 图 4-7 页 面 初始 结构 


【案例 4-2】 创建 邮件 链接 和 锚 链 接 。 

@ 启动 Dreamweaver CS6, 新 建 空 犁 HTML 5 文档 ,在 页 面 中 输入 相关 内 容 , 页 面 
结构 如 图 4-7 所 示 。 这 里 建议 在 段落 p 元 素 中 输入 较 多 的 文字 内 容 , 这 是 因为 ,如 果 文 本 
内 容 太 短 (一 个 屏幕 即 可 完全 显示 ) ,即便 创建 锚 链 接 也 不 能 看 到 效果 。 

@ 将 光标 定位 在 要 创建 锚 点 的 位 置 上 , 即 目标 位 置 。 本 案例 中 将 光标 定位 在 页 面 顶 
部 的 “荷塘 月 色 ” 文 字 前 面 。 

@ 在 插入 面板 “常用 ”类 别 中 , 单 击 “ 命 名 锚 记 ”按钮 喘 , 或 者 在 菜单 栏 中 执行 “ 插 
入 ”一 “命名 锚 记 ”命令 ,再 或 者 按 Ctrl 十 Alt 十 A 键 ,打开 “命名 锚 记 ”对 话 框 。 

@ 在 该 对 话 框 内 的 “ 锚 记 名 称 ” 文 本 框 中 输入 “top”, 如 图 4-8 所 示 。 单 击 “ 确 定 ” 按 
钮 , 即 可 在 文中 “荷塘 月 色 " 前 面 插入 锚 记 图 标 ,如 图 4-9 所 示 。 


CE TE 


荷塘 月 色 ( 节 移 ) 
月 如 水 一 般 . 站 地 本 在 六 一- 


oar) Crtide> x “加 


图 4-8 “命名 锚 记 ”对 话 框 图 4-9 插入 命名 锚 记 后 的 效果 
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@ 将 光标 定位 在 页 面 底部 的 “返回 页 面 顶部 "文字 中 间 ,并 在 属性 面板 中 “链接 ”文本 
框 内 输入 锚 记 名 称 "# top”, 即 可 完成 一 个 锚 链 接 的 创建 ,如 图 4-10 所 示 。 

@ 将 光标 定位 在 页 面 底 部 的 “信息 反馈 ”文字 中 间 , 并 在 属性 面板 中 “链接 ”文本 框 内 
输入 "mailto: wufeng1121@126. com”, 即 可 完成 一 个 邮件 链接 的 创建 ,如 图 4-11 所 示 。 


纪元 - 束 AWILETS 要 元 - 束 电 二 
树 接 由 #top 7 名品 烽 接 四 mailto: vafengl1218126. con @ 
图 4-10 创建 锚 链 接 图 4-11 创建 邮件 链接 


@ 保存 网 页 文件 ,在 浏览 器 中 预览 后 单 击 “返回 页 面 顶 部 ”文字 链接 , 即 可 返回 页 面 
顶部 ; 单 击 “ 信 息 反 馈 "文字 链接 , 即 可 打开 Outlook 软件 。 


4.1.3 与 文本 相关 的 基础 属性 


网 页 中 呈现 的 文字 外 观 ( 大 小 .加 粗 和 风格 等 ) 均 在 CSS 中 进行 控制 , 表 4-1 和 表 4-2 
是 CSS 中 常用 的 字体 属性 和 文本 属性 ,通过 对 这 些 属性 的 设置 可 以 精确 控制 文本 
外 观 。 


表 4-1 CSS 中 常用 的 字体 属性 


CSS 字体 属性 解 释 
font 该 属性 是 简写 属性 ,其 作用 在 于 将 所 有 针对 字体 的 属性 设置 在 一 个 声明 中 
font-family 设置 网 页 使 用 字体 的 类 别 
font-size 设置 文本 的 字体 大 小 
font-weight 设置 字体 的 粗细 ,包含 100 一 900 多 个 级 别 
font-style 设置 文本 的 字体 样式 
font-variant 设置 文本 为 小 型 大 写字 母 的 外 形 


表 4-2 CSS 中 常用 的 文本 属性 


CSS 文本 属性 解 释 
line-height 设置 行 高 
text-indent 设置 文本 块 首 行 的 缩 进 (段落 设置 中 经 常 使 用 ) 
text-align 设置 文本 的 水 平 对 齐 方式 
text-decoration 设置 添加 到 文本 的 装饰 效果 ( 超 链 接 设置 中 经 常 使 用 ) 
text-shadow 设置 文本 的 阴影 
text-overflow 设置 文本 溢出 时 的 事件 
word-wrap 设置 当前 行 超过 指定 容器 的 边界 时 是 否 断 开 换行 
1. font-family 


font-family 属性 用 于 定义 目标 元 素 使 用 何 种 字体 进行 显示 。 在 CSS 中 ,可 以 一 次 定 
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义 多 个 字体 类 别 让 系统 自行 选择 ,样式 代码 如 下 。 

Pp {font- family:" 伍 软 雅 黑 " " 听 体 " Arial, Verdana, "Time New Roman";} 

操作 系统 中 ,一般 包 含 系统 默认 的 “宋体 “黑体 “楷体 "Arial 和 Times New Roman 
等 常规 字体 ,如 果 开 发 者 要 使 用 特殊 字体 (例如 方正 水 柱 简体 等 ) ,可 将 该 字体 文件 存放 到 


Web 服务 器 上 , 它 会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 
若 使 用 这 种 方法 ,需要 在 CSS 规则 中 使 用 "“@fontrface" 规 则 ,样式 代码 如 下 。 


@ font- face {font- family: 自 定义 字体 名 称 ; src: url(" 自 定义 字体 .ttf");} 
而 在 使 用 Web 服务 器 上 的 字体 时 ,需要 使 用 font-family 属性 引用 自 定义 字体 。 
【案例 4-3】 font-family 属性 。 


@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-12 所 示 
的 结构 代码 。 


body> 
Kdiv class="box"> 
<h2> 中 秋 </h2> 
<p class="a">( 唐 ) 李 朴 </p> 
<p class="p"> 扩 缠 当空 宝 镜 升 ， 云 间 仙 箱 各 无 声 ; </p> 


<p class 
<p class: 


"> 平分 秋色 一 轮 黄 ， 长 伴 云 昔 千里 明 ! </p> 
d"> 黎 免 空 从 弦 外 落 ， 妖 是 休 疝 眼前 生 ! </p> 
<p class="e"> 灵 样 拟 约 同 的 手 ， 更 待 银 河 彻底 青 。 </p> 
</div> 
<aiv class="box"> 
<P class="f"> 这 里 的 字体 并 没有 安装 到 本 地 计算 机 中 ， 而 是 使 用 | 
的 是 服务 器 字体 。</p> 
</div> 
[</body> 


图 4-12 案例 4-3 的 页 面 结构 
@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-13 所 示 。 


<style type="text/css"> 


box { 
border: 4px #FF0000 solid;/* 设 置 边 框 粗细 、 颜 色 和 类 型 */ 
padding: 10px;/* 设 置 box 的 内 边 距 为 0px*/ 
margin: 10px;/* 设 置 box 的 外 边 距 为 opx*/ 
text-align: center;/*box 内 所 有 内 容 居中 */ 

) 

.a {font-family: "黑体 ";)/* 定 义 a 类 文字 为 黑体 */ 

,b {font-family: "宋体 "; )/* 定 义 b 类 文字 为 宋体 */ 

-c {font-family: /* 定 义 c 类 文字 为 华文 行 档 */ 

.ad ffonc-family: 

.e {font-family: 

Bront-face ¢ 
font-family: myfont; 
src: url(boyang.TIF); 

)/* 创 建 自 定义 字体 ， 并 设置 该 字体 服务 器 的 路 径 */ 

.£ {font-family: myfont;}/* 引 用 自 定义 字体 */ 

</style> 


云 ";}/* 定 义 a 类 文字 为 华文 彩云 */ 
;)/* 定 义 e 类 文字 为 微软 雅 黑 */ 


图 4-13 案例 4-3 的 CSS 规则 


@ 通过 浏览 器 预览 ,效果 图 如 图 4-14 所 示 。 
2. font-size 


font-size 属性 用 于 设置 元 素 的 字体 大 小 ,其 值 可 以 是 绝对 值 也 可 以 是 相对 值 。 常 见 
的 有 px( 绝 对 单位 ) em( 相 对 单位 )、%( 相 对 单位 ) 和 pt( 绝 对 单位 ) 等 。 
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丫 font-family 尾 性 
AA 
标题 没有 定义 字体 
系统 使 用 默认 字体 
( 唐 ) 李 朴 此 行 设置 为 黑体 
此 行 设置 为 宋体 挤 魄 当 空 宝 镜 升 ， 云 间 仙 籁 寂 无 声 ; 
平分 秋色 一 轮 满 ， 长 伴 云 衔 千里 明 - 此 行 设置 为 华文 行 楷 
此 行 设置 为 华文 彩云 ER 


灵 杰 拟 约 同 携手 ， 更 待 银河 彻底 清 . 此 行 设置 为 微软 雅 黑 


这 团 的 字体 开 没 有 安装 到 序 她 计 四 机 
全 ， 布 是 使 用 的 是 县 方 归 字 体 。 此 段落 使 用 服务 器 自 定义 字体 


图 4-14 font-family 属性 预览 效果 


3. font-style 

font-style 属性 用 于 定义 字体 的 风格 ,其 中 包括 normal( 默 认 值 ,正常 字体 ) \italic( 斜 
体 ) 和 oblique( 倾 和 斜体) 三 个 属性 值 。 

4. font-weight 

font-weight 属性 用 于 设置 字体 的 粗细 , 它 包含 normal、 bold、 bolder \lighter、100 一 
900 个 属性 值 ,数字 值 400 相当 于 关键 字 normal,700 等 价 于 bold。 

【案例 4-4】 字体 的 大 小 ,样式 和 粗细 。 

J@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-15 所 示 
的 结构 代码 。 


Fboay> 
div id="box 1" class="box"> 
<h2>font-style 属 性 </h2> 
<p> 该 属性 用 于 定义 字体 的 风格 ， 其 中 包括 normal 、italic 和 <span>| 
oblique</span> 三 个 属性 值 。 </p> 
</div> 
div id="box 2" class="box"> 
<h2>font-weight 属 性 </h2> 
<p> 该 属性 用 于 设置 字体 的 粗细 ， 它 包含 
Inormal , bold、 bolder、 lighter 和 <span>100-900</span> 等 多 
个 属性 值 。</p> 
|cyaiv> 
|<aiv id="box 3" class="box"> 
<h2>font-size 属 性 </h2> 
<p> 访 属性 用 于 设置 元 素 的 字体 大 小 ， 其 值 可 以 是 绝对 单位 也 
可 以 是 相对 单位 </p> 
[</div> 
/body> 


4-15 案例 4-4 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-16 所 示 。 


- 
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ryle type="text/css"> 
‘box { 
border: 1px #C60 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
padding: 5px;/* 设 置 box 的 内 边 距 为 spx*/ 
margin-bottom: Spx; 设置 与 其 他 守 宁 展 部 的 下/ 
} 
#box_1 h2 {font-style: italic;}/* 设 置 标题 为 斜体 */ 
#box_1 span {font-style: oblique;)/* 设 置 字体 为 颌 笠 体 */ 
#box_2 h2 {font-weight: 400;)/* 设 置 标题 为 正常 粗细 */ 
#box_2 span {font-weight: bold;}/* 设 置 字体 为 加 粗 */ 
#box_3 h2 {font-size: 40px;)/* 设 置 字体 大 小 为 绝对 单位 */ 
#box_3 p {font-size: 1.5em;)/* 设 置 字体 大 小 为 相对 单位 */ 
[c/style> 


4-16 案例 4-4 的 CSS 规则 


回 通过 浏览 器 预览 ,效果 图 如 图 4-17 所 示 。 


D tv 
to ch Q 
设置 标题 为 斜体 font-style 属 料 
于 定 的 其 中 包 : 1、italic 和 
设置 个 别 内 容 字体 一 | 客人 ， 基 和 和 worn 


为 倾斜 体 


font-weight 属 性 去 除 标题 原本 的 加 粗 属 


性 ， 使 其 变 为 正常 粗细 
这 本 作用 下 训 于 二 估 仙 二 本 统 全 证 一 一 | 一 设置 个 别 内 容 字体 为 加 粗 


宁 e 志 大 站 font-size 属 性 


该 属性 用 于 设置 元 素 的 字体 大 小 ， 其 值 一 设置 字体 为 相对 单位 
可 以 是 绝对 单位 也 可 以 是 相对 单位 。 


图 4-17 字体 的 大 小 、 样 式 和 粗细 预览 效果 


4.1.4 行 高 与 首 行 缩 进 


1. line-height 


line-height 属性 用 于 控制 行 与 行 之 间 的 垂直 间距 ,该 属性 的 取 值 可 使 用 百分比 (如 
80% 等 )、 固 定 的 像素 值 (如 20px 等 ) 和 数值 (如 1.5 等 ), 且 允许 使 用 负 值 ,默认 值 为 


normal。 


2. text-indent 


text-indent 属性 能 够 实现 文本 缩 进 效果 ,该 属性 值 可 以 为 百分比 数字 或 者 由 浮 点 数 
字 和 单位 标识 符 组 成 的 长 度 值 , 且 允 许 为 负 值 .如 下 面 的 代码 片段 所 示 。 


P {text— indent:: 24p;} /* 由 于 是 固定 值 , 故 不 能 根据 字体 大 小 变化 准确 地 缩 进 两 个 汉字 距离 x / 
Pp {text— indent: 2em;} /* 由 于 是 相对 值 , 故 能 够 根据 字体 大 小 变化 自动 缩 进 两 个 汉字 距离 * / 
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【案例 4-5】 行 高 与 首 行 缩 进 。 
@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-18 所 示 
的 结构 代码 。 


Fboay> 
<div class="box"> 


<h2> 首 行 缩 进 </h2> 


4-18 案例 4-5 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-19 所 示 。 


atyle type="text/cas"S> 
box { 
border: 1px #C60 solid;/* 设 置 边框 粗 细 、 颜色 和 类 型 */ 
padding: 5px;/* 设 置 box 的 内 边 距 为 5px*/ 
margin-bottom: 5px;/* 设 置 与 其 他 元 素 底部 的 距离 */ 


.box p {text-indent: 2em;)/* 设 置 缩 进 距 离 为 字体 大 小 的 2 俗 ， 即 两 个 汉字 的 距离 */ 
.baifenbi (line-height: 60%;)/* 使 用 百分比 值 设置 行 高 为 60%*/ 

.xiangsu {line-height: 30px;)/* 使 用 像素 值 设置 行 高 为 30px*/ 

.shuzi {line-height: 1.5;)/* 使 用 数值 设置 行 高 为 1 .5*/ 

</style> 


4-19 案例 4-5 的 CSS 规则 


@@ 通过 浏览 器 预览 ,效果 图 如 图 4-20 所 示 。 


是 让 首 行 缩 进 
设置 缩 进 距 离 为 字体 大 小 的 | 
2 倍 ， 即 两 个 汉字 的 距离 le 
或 者 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 
值 ， 且 允许 为 负 值 。 
设置 行 高 
行 高 设置 为 60%， 文 字 5 ine-height 属 性 
出 需 重 到 现象 控制 和 条 生 尖 鲁 由 刘 胰 : t 
2 在 CSS 样 式 中 ， 使 用 line heisht 属 性 | | 。。 使 用 像素 值 设置 行 高 为 30px， 
使 用 数值 设置 行 高 为 1.5， 指 控制 行 与 行 之 间 的 委 直 间距 。 不 能 根据 字体 大 小 自动 调整 
的 是 1.5 们 行距， 能够 根据 字 上。 3. 在 Css 样 式 中 ， 使 用 1ine-height 属 性 
体 大 小 自动 调整 行 间距 控制 行 与 行 之 间 的 委 直 间距 。 


图 4-20 行 高 与 首 行 缩 进 预览 效果 
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4.1.5 文本 阴影 

在 CSS 中 ,text-shadow 属性 用 来 控制 文本 的 阴影 效果 ,能 够 规定 水 平 阴影 、 垂 直 阴 
影 、 模 糊 距 离 , 以 及 阴影 的 颜色 ,常规 使 用 方法 如 下 。 

text— shadow: Sx Sx Fx # EDOOO; 

这 里 第 一 个 5px 代表 阴影 在 水 平方 向 的 位 移 ,第 二 个 5px 代表 阴影 在 垂直 方向 的 位 
移 , 第 三 个 5px 代表 阴影 的 模糊 半径 ,第 四 项 #FF0000 代表 阴影 的 颜色 。 需 要 说 明 的 是 ， 
每 个 阴影 效果 必须 指定 偏 移 距 离 ,而 模糊 半径 和 颜色 属性 值 可 以 省 略 , 如 果 将 偏 移 距离 设 
置 为 负 值 , 则 代表 阴影 向 反方 向 偏 移 。 

此 外 ,还 可 以 为 同一 个 对 象 设置 多 个 阴影 ,阴影 效果 按照 给 定 的 顺序 依次 应 用 ,但 永 
远 不 会 覆盖 文本 本 身 。 

【案例 4-6】 文本 阴影 。 

OO 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-21 所 示 


的 结构 代码 。 
@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-22 所 示 。 


[<scyie type="text/css"> 
.box { 


border: 2px #FF0000 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
margin-bottom: 10px;/* 设 置 与 其 他 元 素 底部 的 距离 */ 


font-family: "微软 雅 黑 "; 
font-weight: bolder; 
font-size: 40px; 
} 
‘a { text-shadow: 0.1em 0.1em 0.2em #000000; 
color: #FFF;:) 
.b ( text-shadow: Opx -1px #333333; 
color: #e3elel;) 
‘Cc { text-shadow: 0 0 4px white, 
0 -Spx 4px #FFFF33, 
2px -10px 6px #FFDD33, 
2px -15px 11px #FF8800, 
2px -25px 18px #FF2200; 


<body> 

<div class="box"> 
<p class="a">1.Text-shadow</p> 

</div> 

<div class="box"> 
<p class="b">2.Text-shadow</p>| 

</div> 

<div class="box"> 

<P class="c">3.Text-shadow</p> 


</div> color: #000;) 
</body> </style> 
图 4-21 案例 4-6 的 页 面 结构 图 4-22 案例 4-6 的 CSS 规则 


通过 浏览 器 预览 ,效果 如 图 4-23 所 示 。 
4.1.6 溢出 文本 与 文本 换行 

1. text-overflow 

在 浏览 网 页 时 ,读者 时 常会 遇 到 某 些 栏目 由 于 内 部 文字 过 长 ,在 文本 结尾 时 使 用 省 略 
号 显示 的 场景 。 之 前 ,一 般 使 用 JavaScript 脚本 来 实现 这 种 效果 ,而 现在 CSS 3 新 增 了 
text-overflow 属性 ,使 得 这 个 问题 简化 很 多 。 

text-overflow 属性 规定 当 文 本 溢出 包含 元 素 时 的 处 理 方式 ,该 属性 包含 clip 和 
ellipsis 两 个 属性 值 。 前 者 表示 简单 的 裁 切 ,不 显示 省 略 标记 (...) ;后 者 表示 当 文 本 溢出 
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这 里 使 用 的 是 text-shadow 
属性 的 基本 参数 设置 


这 里 使 用 负 值 的 偏 移 距 离 ， 
使 得 文字 呈现 内 阴影 效果 


这 里 为 同一 对 象 赋予 多 个 阴影 
效果 ， 使 得 呈现 出 燃烧 特效 


4-23 文本 阴影 预览 效果 


时 显示 省 略 标记 (.…) 。 

特别 注意 的 是 ,要 实现 溢出 文本 显示 省 略 号 的 效果 ,除了 使 用 text-overflow 属性 以 
外 ,还 必须 配合 white-space:nowrap( 强 制 文本 在 一 行内 显示 ) 和 overflow:hidden( 溢 出 
内 容 为 隐藏 ) 同 时 使 用 才能 实现 。 

【案例 4-7】 溢出 文本 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-24 所 示 
的 结构 代码 。 


[<6aayy 
<section id="sidebar"> 
<h2> 今 日 要 闻 </h2> 
<ul> 
<li><ea href="#"> 多 个 家 居 电 商品 牌 步 入 调整 期 发 展 还 得 靠 烧 钱 </a></1i> 
<li><a href="#"> 私 人 空间 的 私密 创意 世界 各 地 so 后 的 房间 画像 </a></11>| 
<1li><a href="#"> 让 人 心动 的 19 个 特色 主题 酒店 </a></1i> 
</ul> 
</section> 
</body> 


图 4-24 案例 4-7 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-25 所 示 。 通 过 浏览 器 预览 ， 
效果 如 图 4-26 所 示 。 

2. word-wrap 

在 案例 4-6 中 ,使 用 到 white-space 属性 ,该 属性 是 CSS 1 中 的 规则 ,为 了 增强 文本 换 
行 的 显示 功能 ,在 CSS 3 中 还 增加 了 word-wrap 专 有 属性 ,并 对 其 进行 了 标准 化 处 理 。 
word-wrap 属性 用 来 设置 当前 行 超过 指定 容器 的 边界 时 是 否 断 开 换行 ,其 属性 值 包含 
normal( 控 制 连续 文本 换行 ) 和 break-word( 内 容 在 边界 内 换行 ) 。 
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[<style type="text/css"> 
body, ul, 1i, section, h2 { 
margin: 0; 
padding: 0; 
)/* 元 素 初始 化 */ 
#sidebar { 
width: 310px; 
border: 5px #FF0000 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
padding: 10px;/* 设 置 box 的 内 边 距 为 10px*/ 
》 
211 
list-style: none; 
border-bottom: 1px #999 dashed;/* 设 置 新 闻 列表 底部 虚线 外 观 */ 
margin-boctom: 5px;/* 设 置 列表 项 之 间 的 距离 */ 
a 
display: block; /* 块 杖 化 a 元 素 */ 
width: 300px;/* 设 置 固定 宽度 */ 
line-height: 1.5;/* 设 置 行 高 为 1.5 供 行距 */ 
text-overflow: ellipsis;/* 文 本 溢出 时 显示 省 略 标记 (...) */ 
overflow: hidden;/* 为 使 用 text-overflow 侯 准备 ,将 游 出 内 容 设置 为 隐藏 */ 
white-space; nowrap;/* 为 使 用 text-overflow 做 准备 ， 强 制 文字 在 一 行内 显示 */ 
text-decoration: none;/* 取 消 超 树 接 默 认 时 的 下 划 线 效果 */ 
) 
</style> 


4-25 案例 4-7 的 CSS 规则 


四 溢出 文本 x 
所 了 CQ 口 V4-7%20 溢 出 文本 .html 空 | 三 


今日 要 闻 


A 品牌 步 入 调整 其 发 展 还 得 .… 此 列表 项 内 容 超 
atl te 出 了 容器 设置 的 
私人 空间 的 私密 创意 世界 各 地 80 后 的 房 "下 | 范围 ， 出 现 了 省 
让 人 心动 的 19 个 特色 主题 酒店 略 标记 
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需要 特别 说 明 的 是 , 当 使 用 break-word 属性 值 时 ,中 文 文本 和 英文 语句 没有 任何 问 
题 , 但 较 长 的 英文 单词 或 长 串 的 英文 字符 就 会 被 拆 分 。 

【案例 4-8】 文本 换行 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-27 所 示 
的 结构 代码 。 


boay> 
div class="box"> 
<p>word-wrap 属 性 用 来 设置 当前 行 超过 指定 容器 的 边界 时 是 否 断 开 换行 。</p> 
<p>Welcome to my home! </p> 
|</div> 
<div class="box"> 
<p>Welcome to my home! abcdefghijklmnopqrstuvwxyz!</p> 
[c/aiv> 
[</body> 


4-27 案例 4-8 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-28 所 示 。 
@ 通过 浏览 器 预览 ,效果 如 图 4-29 所 示 。 
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[scyie type="text/css"> 
.box { 
border: 1px #C60 solid;/* 设 置 边 框 粗细 、 颜 色 和 类 型 */ 
width: 100px;/* 设 置 容 器 宽度 */ 
margin: 10px;/* 设 置 外 边 距 */ 
float :left;/* 设 置 容器 向 左 浮动 */ 


pi 
word-wrap: break-word;/* 内 容 在 边界 内 换行 */ 


} 


4-28 案例 4-8 的 CSS 规则 


使 用 word-wrap 属 性 后 ， 

中 文 文本 显示 正常 使 用 word-wrap 属 性 后 ， 
oparstuvms 长 英文 字符 串 被 拆 分 

使 用 word-wrap 属 性 后 ， 

英文 语句 显示 正常 
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4.1.7 CSS 伪 类 在 超 链 接 方面 的 应 用 

伪 类 (Pseudo-Class) 之 所 以 名 字 中 有 “ 伪 ” 字 ,是 因为 它 所 指定 的 对 象 在 文档 中 并 不 
存在 , 它 指定 的 是 一 个 或 者 与 其 相关 的 选择 符 的 状态 。 伪 类 语法 的 形式 如 下 。 

选择 符 : 伪 类 {属性 : 属性 值 ; } 


伪 类 可 以 让 用 户 在 使 用 页 面 的 过 程 中 增加 更 多 的 交互 效果 ,最 常见 的 应 用 是 超 链接 
a 元素 的 几 种 状态 , 它 通过 :link、: visited、:hover 和 :active 来 控制 链接 内 容 访问 前 、 访 问 
后 、 鼠 标 悬 停 时 以 及 鼠标 单 击 时 的 样式 。 具 体 代 码 如 下 所 示 。 


a:link {oolor:# FE0000;} /* 未 访问 的 链接 状态 * / 
a:visited {color:# 00FFO0;} /# 已 访问 的 链接 状态 * / 
a:hover {color:# FEOOFF;} /* 鼠标 悬 停 到 链接 上 的 状态 * / 
a:active {color:# 0000EF;} /* 被 激活 的 链接 状态 * / 


【案例 4-9】 伪 类 在 超 链 接 方面 的 应 用 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-30 所 示 
的 结构 代码 。 

@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-31 所 示 。 

@ 通过 浏览 器 预览 ,效果 如 图 4-32 所 示 。 
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boay> 
cul class="none"> 

<1i><a href="#"> 伪 类 在 超 树 接 中 的 应 用 (默认 效果 ) </a></1i> 
</u1> 
<ul class="Pseudo"> 

<1i><a href="#"> 伪 类 在 超 权 接 中 的 应 用 </a></1i> 

<li><a hre: > 伪 类 在 超 链 接 中 的 应 用 </a></1i> 

<1i><a href="#"> 伪 类 在 超 树 接 中 的 应 用 </a></1i> 
</u1> 
</body> 


4-30 案例 4-9 的 页 面 结构 


<style type="text/css"> 
"+ 
margin: 0; 
padding: 0; 
} 
ul { 
border: 1px #C60 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
margin: 10px;/* 设 置 外 边 距 */ 
padding: 2px;/* 设 置 内 边 距 */ 
list-style; none;/* 青 除 列表 原 有 样式 */ 
} 
ul li af 
display: block;/* 块 杖 化 所 有 a 元 素 */ 
height: 24px;/* 由 于 a 元 素 块 杖 化 ， 所 以 这 里 为 a 元 素 设置 高 度 */ 
line-height: 24px;/* 设 置 行 高 与 a 元 素 高 度 一 样 ， 使 得 其 内 部 文字 能 够 秋 直 居中 */| 
padding-left: 20px;/* 设 置 左 侧 缩 进 20px 的 位 置 */ 
text-decoration; none;/* 清 除 所 有 超 榜 接 初始 状态 下 的 下 划 线 效果 */ 
} 
.Pseudo 1i a:hover { 
color: #F00;/* 设 置 良 标 悬 停 时 字体 颜色 */ 
text-decoration: underline;/* 设 置 限 标 县 售 时 ， 有 下 划 线 效果 */ 
font-weight: bolder;/* 设 置 也 标 悬 停 时 字体 加 粗 */ 
background: url (hover.gif) no-repeat left center;/* 由 于 左 便 缩 进 ， 
这 里 可 以 为 超 链 接 添加 图 像 背 景 */ 
} 
</style> 


4-31 案例 4-9 的 CSS 规则 


所 了 CQ |D 荐 按 方 面 的 应 用 html# | 三 


没有 添加 :hover 一 一 | 十 _ 伪 类 在 超 链 接 中 的 应 用 (默认 效果 ) 


的 超 链接 
伪 类 在 超 链 接 中 的 应 用 鼠标 悬 停 后 ， 字 
号 伪 类 在 超 链接 中 的 应 用 体 改变 颜色 、 外 


类 校 中 的 应 形变 粗 、 增 加 
伪 类 在 超 链接 中 的 应 用 片 背 景 效果 


EY../4-9 伪 闫 在 -… 


图 4-32 伪 类 在 超 链接 方面 的 应 用 预览 效果 


4.2 图 像 


图 像 在 网 页 设计 中 拥有 举足轻重 的 作用 ,其 存在 的 目的 除了 传达 必要 的 信息 以 外 ,更 
多 时 候 还 是 为 了 烘托 网 站 主题 .吸引 浏览 者 的 注意 力 。 在 实际 工作 中 ,设计 者 不 仅 要 考虑 
如 何 处 理 图 像 ,还 要 考虑 网 站 发 布 后 如 何 高 效 地 对 图 像 进行 修改 。 在 网 页 中 ,常见 的 图 像 
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格式 有 三 种 , 即 GIF JPEG 和 PNG 。 

(1) GIF 格式 。GIF 文件 格式 最 多 使 用 256 种 颜色 ,适合 显示 色调 不 连续 或 具有 大 
面积 单一 颜色 的 图 像 ,并 且 能 够 实现 透明 背景 效果 。 

(2) JPEG 格式 。JPEG 文件 格式 是 一 种 压缩 格式 ,适合 在 网 络 上 传输 ,是 非常 流行 
的 图 形 文件 格式 。 

(3) PNG 格式 。PNG 格式 图 片 因 其 高 保 真性 、 透 明 性 及 文件 体积 较 小 等 特性 ,被 广 
泛 应 用 于 网 页 设计 中 。 目 前 ,在 许多 大 型 网 站 中 使 用 同一 个 PNG 图 片 做 背景 ,按钮 . 导 
航 条 等 全 包含 在 该 背景 图 上 , 究 其 缘由 无 非 就 是 PNG 图 片 在 下 载 过 程 中 占 带宽 较 小 ,而 
且 颜 色 逼 真 。 


4.2.1 插入 图 像 


1. 插入 图 像 

要 在 Dreamweaver CS6 的 文档 窗口 中 插入 图 像 , 可 以 按照 以 下 方法 进行 。 

(1) 启动 Dreamweaver CS6 ,将 光标 定位 在 需要 插入 图 像 的 位 置 上 。 

(2) 在 菜单 栏 中 执行 “插入 ”一 图像” 命令 ,或 者 在 插 和 人 面板 的 “常用 类别 中 , 单 击 
“图 像 : 图 像 " 图 标 。 

(3) 此 时 ,弹出 “选择 图 像 源 文件 "对话 框 ,如 图 4-33 所 示 。 在 该 对 话 框 中 ,选择 需要 
的 图 像 , 右 侧 预 览 窗 口 即刻 显示 预览 效果 , 单 击 “ 确 定 ” 按 钮 。 


选择 文件 名 自 : 回 文 件 系统 
日 堵 据 源 


查找 范围 四， 且 ch04 


出 4-3 font-family 属 性 
evGFz3500 
嘲 hovergif 


[= 


文件 名 四 : 。 phene png 152 x 175 PNG TK/ 1 
文件 类 型 [图像 文件 06if*. jpeit. Jpegit- pne;* 了 
WL: phone. pne 

相对 于 : 文档 sj 4-9 伪 类 在 超 链 接 方面 的 应 用 - htnl 
在 站 点 定义 中 更 改 对 这 的 嵌 拉 相对 二 


团 预 此 图 像 


图 4-33 “选择 图 像 源 文件 ”对话 框 
(4) 这 时 弹出 如 图 4-34 所 示 的 对 话 框 。 在 此 对 话 框 中 ,“ 葵 换文 本 ” 指 的 是 用 户 需 要 


为 图 像 输入 一 个 名 称 或 一 段 简 短 描述 ; “详细 说 明 ” 用 于 设置 当 用 户 单 击 图 像 时 所 显示 的 
文件 的 位 置 。 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 ,图 像 即刻 显示 在 文档 中 。 
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车 换文 本 ”电话 ~ 
详细 说 明 - http:// [=] 


如 果 在 插入 对 象 时 不 想 输入 此 信息 ， 适 更改- 力 助 功 
兹 首选 估 数 。 


图 4-34 “图 像 标签 辅助 功能 属性 ”对 话 框 


需要 指出 的 是 ,如 果 引 用 的 图 像 路 径 在 当前 站 点 中 , 则 图 像 src 属性 值 为 相对 地 址 ， 
即 src 一 "phone. png"; 如 果 不 在 当前 站 点 中 , 则 图 像 src 属性 值 为 绝对 地 址 , 即 src 一 
"file:///DI/My Pictures/images/phone. png"。 在 实际 工作 中 ,使 用 指向 本 地 的 绝对 地 
址 ,在 网 站 发 布 后 会 导致 图 像 无 法 正常 显示 。 所 以 ,设计 者 通常 将 图 像 放 在 本 站 点 内 的 


images 文件 夹 中 ,并 做 相对 地 址 的 链接 。 


(5) 正确 插入 图 像 后 ,再 次 选中 该 图 像 ,可 以 在 软件 的 属性 面板 中 对 图 像 进 行 属 性 设 


置 ,如 图 4-35 所 示 。 


图 4-35 图 像 的 属性 面板 


名 ID: 用 于 设置 图 像 的 名 称 , 以 便 在 用 脚本 撰写 语句 时 引用 该 
辟 源 文件 : 指定 图 像 的 路 径 。 
所 链接 : 用 于 设置 单 击 图 像 时 的 超 链接 。 


(= jE 六 件 回 ptse ms。 ] 售 忆 曾 拓 四 sO 132 [rh 交加 无 
= 错失 中 je a 国 六 于 R04 P| 

地 本 如 | 目标 多 -| 

(ROOY mi 5 


图 像 。 


尾 蔡 换 ; 为 图 像 输 入 一 个 简短 的 描述 性 语句 , 当 鼠 标 悬 停 在 该 图 像 上 时 ,就 显示 该 输 


入 的 信息 。 
所 编辑 : 使 用 指定 的 外 部 编辑 器 打开 选 定 的 图 像 并 编辑 。 
亏 地 图 : 用 于 创建 客户 端 图 像 地 图 。 
乞 宽 和 高 : 图 像 的 宽度 和 高 度 ,以 像素 表示 。 


2. 图 像 的 热点 链接 


在 同一 张 图 像 中 ,可 以 创建 多 个 热点 链接 , 当 访 问 者 单 击 不 同 的 热点 链接 时 ,页 面 就 


会 跳 转 至 其 他 页 面 。 创 建 了 热点 的 图 像 , 热 点 就 成 为 图 像 的 一 部 分 ， 


时 ,图 像 中 所 有 热点 也 会 发 生 相 应 的 变化 。 
3. 图 像 占 位 符 


当 改变 图 像 的 大 小 


图 像 占 位 符 用 于 替代 图 像 的 位 置 , 常 在 图 像 暂 未 制作 完成 时 使 用 。 


4. 鼠标 经 过 图 像 


鼠标 经 过 图 像 指 的 是 , 当 光 标 悬 停 在 某 一 幅 图 像 上 面 时 ,会 显示 另 一 幅 图 像 ,而 当 光 
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标 移 开 时 ,又 恢复 为 原 有 图 像 。 这 种 图 像 蔡 换 的 效果 ,常用 于 导航 和 图 标 按钮 中 ,以 增强 
用 户 体验 ,而 在 实际 应 用 中 ,设计 者 通常 使 用 CSS 中 a 元 素 的 伪 类 实现 图 像 交替 效果 。 

【案例 4-10】 图 像 的 几 个 实例 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档。 在 页 面 中 创建 如 图 4-36 所 示 
的 结构 代码 。 

@ 将 光标 定位 在 “二 h3 二 图 像 的 热点 链接 二 /h3 二 ”标签 后 面 ,并 插入 一 幅 图 像 。 选 
中 之 前 插入 的 图 像 , 并 在 属性 面板 中 选中 热点 工具 问 。 然 后 在 图 像 上 绘制 热点 区 域 ,如 
图 4-37 所 示 。 


衣 cvs ) Weems\chon4 10 天 信 e911 个 示 4-10 型 相 的 几 个 示 仙 htm - 口 X 


boay> 

div class="box"> 
<h3> 图 像 的 热点 链接 </h3>| 

[</div> 

div class="box"> 


<h3> 图 像 占 位 符 </h3> 
Mh i 向 局 同 吕 站 
> 了 oD mn ga NED A Wwe) 
/div> 地 相遇 民 标 罗 -| 
[</body> NODIOS Ld SD 
图 4-36 案例 4-10 的 页 面 结构 图 4-37 绘制 热点 区 域 


@ 绘制 结束 后 ,选择 属性 面板 中 的 指针 热点 工具 [Nj], 选中 刚才 绘制 的 圆 形 热点 区 域 ， 
此 时 属性 面板 显示 为 热点 的 属性 。 在 此 面板 中 ,为 “链接 "和 “目标 ”参数 进行 相应 的 设置 ， 
图 像 的 热点 链接 创建 完成 ,如 图 4-38 所 示 。 


http://mnr_ bai du com 


图 4-38 完善 热点 属性 的 相关 参数 设置 


@ 将 光标 定位 在 “一 h3 二 图 像 占 位 符 志 /h3 二 ”标签 后 面 , 在 菜单 栏 中 执行 “插入 ”~ 
“图 像 对 象 "图 像 占 位 符 ” 命 令 ,或 者 在 插入 面板 的 “常用 "类别 中 单 击 “图 像 : 图 像 占 位 
符 ? 图 标 。 

@ 这 时 弹出 如 图 4-39 所 示 的 对 话 框 。 在 
此 对 话 框 中 ,“ 名 称 ” 文 本 框 用 于 设置 图 像 占 位 
符 在 Dreamweaver 中 显示 的 名 字 ;“ 宽 "和 “高 ” 
用 于 设置 图 像 占 位 符 的 大 小 ;颜色 ?用 于 设置 
图 像 占 位 符 的 颜色 ,以 区 别 于 其 他 占 位 符 ;“ 替 
换文 本 ”用 于 输入 描述 该 图 像 的 文本 。 设 置 完 


图 4-39 “图 像 占 位 符 ” 对 话 框 
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成 后 , 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 一 个 图 像 占 位 符 。 

@ 将 光标 定位 在 “二 h3 之 鼠标 经 过 图 像 二 /h3 之 ”标签 后 面 , 在 插入 面板 的 “常用 ”类 
别 中 , 单 击 “ 图 像 : 鼠标 经 过 图 像 ” 按 钮 ,即刻 弹出 如 图 4-40 所 示 的 对 话 框 。 对 话 框 中 主 
要 项 目的 含义 如 下 。 


图 像 名 次 ，Inaged 
原始 图像 、enail. pne 
朗 标 经 过 图 像 、linkedin. pne 


团 预 副 总 标 经 过 图 像 
攻 换 文本 ， 限 标 经 过 图 像 
披 下 时 ,前往 的 URL: 


图 4-40 “鼠标 经 过 图 像 " 参 数 设置 


亏 图 像 名 称 : 用 于 设置 鼠标 经 过 图 像 的 名 称 。 

亏 原 始 图 像 : 用 于 设置 页 面 加 载 时 要 显示 的 图 像 。 

所 鼠标 经 过 图 像 : 用 于 设置 鼠标 指针 滑 过 原始 图 像 时 要 显示 的 图 像 。 

名 按 下 时 ,前 往 的 URL: 用 于 设置 当 单 击 图 像 时 要 打开 的 文件 路 径 。 

@ 根据 实际 需要 进行 相关 设置 ,最 后 单 击 “ 确 定 ” 按 钮 , 即 可 完成 鼠标 经 过 图 像 的 
插入 。 

@ 保存 网 页 文档 ,通过 浏览 器 预览 ,可 以 看 到 最 终 效果 ,如 图 4-41 和 图 4-42 所 示 。 


一 a] x 
二 言 @ | 口 4 像 的 几 个 示例 /4-103%20 型 像 的 几 个 示例 . 空 豆 全 辣 CD 04/4-10%20 句 像 的 几 个 示例 /4-10%20 回 安 去 


图 像 的 热点 链接 图 像 的 热点 链接 


图 4-41 鼠标 指针 未 经 过 效果 图 4-42 ”鼠标 悬 停 效 果 
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4.2.2 与 图 像 相 关 的 CSS 属性 


在 工作 中 ,background 属性 是 CSS 中 使 用 频率 非常 高 的 属性 之 一 ,为 了 方便 设计 师 
灵活 地 实现 网 页 效果 ,在 CSS 3 中 增强 了 该 属性 的 功能 ,如 允许 至 加 多 个 背景 图 像 、 允 许 
灵活 缩放 图 像 大 小 ,以 及 允许 设置 图 像 放 置 的 位 置 等 。 在 CSS 中 有 关 控 制图 像 的 常用 属 
性 详 见 表 4-3 所 示 。 


表 4-3 CSS 中 用 于 控制 图 像 的 属性 


CSS 字体 属性 解 释 
background 简写 属性 ,作用 是 将 背景 属性 设置 在 一 个 声明 中 
background-repeat 设置 背景 图 像 是 否 重复 ,以 及 如 何 重复 
background-color 设置 元 素 的 背景 颜色 
background-image 将 图 像 设 置 为 背景 
background-position 图 像 定位 ,用 于 设置 背景 图 像 的 起 始 位 置 
background-attachment 用 于 设置 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 
background-size 定义 背景 图 片 的 大 小 
background-origin 指定 背景 图 像 的 显示 区 域 


1. background-color 
background-color 属性 是 背景 属性 的 一 部 分 ,其 主要 功能 是 设置 页 面 中 相应 元 素 的 
背景 颜色 。 


2. background-image 

background-image 属性 能 够 帮助 设计 者 引用 一 幅 或 多 幅 图 像 作为 背景 出 现在 页 面 
中 。 如 果 某 元 素 同 时 具有 background-image 属性 和 background-color 属性 ,那么 
background-image 属性 将 优先 于 background-color 属性 ,也 就 是 说 背景 图 像 永 远 覆 盖 于 
背景 色 之 上 。 


3. background-repeat 

background-repeat( 背 景 重复 ) 属 性 的 主要 作用 是 设置 背景 图 像 以 何 种 方式 在 网 页 中 
显示 , 它 包含 4 种 平 铺 方式 : repeat( 在 垂直 方向 和 水 平方 向 重复 ) .no-repeat( 不 重复 )、 
repeat-x( 水 平方 向 重复 ) 和 repeat-y( 垂 直方 向 重复 ) 。 

【案例 4-11】 背景 色 与 背景 图 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-43 所 示 
的 结构 代码 。 

@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-44 所 示 。 
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[<sEYiey 
body { background: url (body bg.png) repeat; } 
/* 引 用 背景 图 ， 并 设置 为 横向 和 纵向 均 重 复 排列 */ 
.box { 

width: 300px; 

height: 200px; 

border: 2px #FF0000 solid; 

margin: 10px; 


#box-1 { 
background-color: #FC0;/* 设 置 对 象 的 背景 色 */ 
background-image: url (hail .png) ;/* 设 置 对 象 的 背景 图 像 */ 
background-repeat: no-repeat;/* 设 置 对 象 的 背景 图 不 重 夏 排列 */ 


#box-2 
background: url (snow.png) center center no-repeat, 
url (box-2 bg.jpg) repeat-x; 


}/* 设 置 两 个 背景 图 ， 多 个 图 像 将 层 到 显示 */ 


<body> 
<div class="box" id="box-1"></div>| 
<div class="box" id="box-2"></div>| 


</body> </style> 
图 4-43 案例 4-11 的 页 面 结构 图 4-44 多 种 有 关 背 景 的 CSS 规则 


@ 保存 当前 文档 ,通过 浏览 器 预览 后 效果 如 图 4-45 所 示 。 


口 背景 色 与 背 县 图 


body 元 素 中 使 用 背景 图 像 
横向 和 纵向 平 铺 效果 


这 里 的 容器 包含 背景 色 
和 背景 图 两 个 属性 


这 里 的 容器 使 用 两 个 背景 
图 ， 两 个 图 像 层 释 显 示 


图 4-45 背景 色 与 背景 图 预览 效果 


4. background-size 

background-size 属性 用 于 规定 背景 图 像 的 大 小 。 在 CSS 3 之 前 ,背景 图 像 的 尺寸 是 
由 图 像 的 实际 尺寸 决定 的 。 而 在 CSS 3 中 ,可 以 规定 背景 图 像 的 尺寸 ,这 就 允许 设计 者 在 
不 同 的 环境 中 重复 使 用 背景 图 像 。 

background-size 属性 需要 1 个 或 2 个 值 ,这 些 值 既 可 以 是 像素 px, 也 可 以 是 百 分 
比 % 或 auto, 还 可 以 是 特定 值 cover 或 contain。 

当 取 cover 值 时 ,图 像 将 缩放 到 正好 完全 覆盖 定义 背景 的 区 域 ; 当 取 contain 值 时 ,图 
像 将 缩放 到 宽度 或 高 度 正 好 适应 定义 背景 的 区 域 。 


5. background-origin 
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background-origin 属性 规定 背景 图 像 的 定位 区 域 ,有 content-box( 仅 在 内 容 区 域 显 
示 背 景 ) padding-box( 从 内 边 距 开始 显示 背景 ) 和 border-box( 从 边框 区 域 开 始 显示 背 


景 ) 三 种 属性 值 可 以 选择 。 


【案例 4-12】 图 像 的 大 小 与 位 置 。 
@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 页 面 中 创建 如 图 4-46 所 示 


结构 代码 。 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-47 所 示 。 


" id="box-1"></div> 
<div class="box" id="box-2"></div>| 


div class="box" id="box-3"></div> 
|<div class="box" id="box-4"></div> 
[</body> 


4-46 ”案例 4-12 的 页 面 结构 


<style> 
.box { 
width: 256px; 
height: 256px; 
border: 2px #FF0000 solid; 
margin: 10px; 
ee url (dreamviewer.png) no-repeat; 
float: lef 
}/* 引 用 图 像 ， 谈 置 罕 吕 大 小 与 图 人 原始 大 小 相同 / 
#box-1 {background-size: 50% 50%;)/* 设 置 图 像 为 父 容器 大 小 的 50%*/| 
#box-2 { 
width: 100px; 
height: 100px; 
background-size: cov 
)/* 当 取 值 为 cover 时 ， 肖 虹 图 保 析 银 随 容器 大 小 自 适应 缩放 */ 
#box-3 { 
width:300px; 
height: 150px; 
background-size: contain; 
)/* 当 取 值 为 cover 时 ， 背 景 图 像 将 缩放 到 宽度 或 高 度 正好 的 背景 区 域 */ 
#box-4 + 
padding: 20px; 
background-origin: content-box; 
)/* 设 置 图 像 的 定位 坐标 为 容器 的 content 内 容 区 域 */ 
</style> 


图 4-47 案例 4-12 的 CSS 规则 


@ 保存 当前 文档 ,通过 浏览 器 预览 ,效果 如 图 4-48 所 示 。 


6. background 属性 的 缩写 


在 实际 工作 中 ,为 了 提高 书写 代码 的 效率 ,通常 使 用 background 简写 属性 ,作用 是 将 


背景 属性 设置 在 一 个 声明 中 。 


background- color:# 666; 


background:ur] (dreanviewer.png); 


background- repeat :no- repeat; 
上 述 代码 可 以 简写 为 


示例 代码 如 下 。 


background:# 666 Url (dreanviewer.png) mo- repeat left top; 


这 里 left 代表 背景 图 水 平方 向 居 左 放置 ,top 代表 背景 图 垂直 方向 距 项 放置 。 


4.2.3 图 文 混 排 


几乎 在 任何 一 个 网 页 中 都 会 


出 现 图 文 混 排 的 布局 ,例如 新 闻 类 网 站 首页 各 种 版 块 间 
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box-2 容 器 将 background-size 
属性 设置 为 cover， 背 景 图 俐 
符 跟 随 容 器 大 小 自 适应 缩放 


box-3 容 器 将 background-size 
属性 设置 为 contain， 背 景 


box-1 容 器 引用 图 像 时 将 


background-size 属 性 设置 图 像 将 缩放 到 宽度 或 高 度 
为 50% 正好 的 背景 区 域 ， 这 里 缩放 


到 与 容器 高 度 相同 的 大 小 


box-4 容 器 将 background-origin 
属性 设置 为 content-box， 背 景 
图 像 将 从 content 内 容 区 域 进行 


显示 


图 4-48 图 像 的 大 小 与 位 置 预览 效果 


的 划分 .新 闻 详 细 内 页 ,以 及 购物 网 物品 的 介绍 等 ,这 些 都 需要 图 像 和 文字 相互 配合 才能 
达到 预期 效果 。 无 论 外观 怎 么 变化 ,图 文 混 排 核心 的 内 容 是 让 图 像 进行 浮动 。 下 面 以 实 
例 的 形式 讲解 图 文 混 排 的 实现 方法 。 

【案例 4-13】 图 文 混 排 。 

@ 启动 Dreamweaver CS6 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 images, 然 
后 将 待 使 用 的 图 像 存 放 在 该 文件 夹 中 。 

@ 在 页 面 内 搬入 一 个 名 为 box 的 DIV 容器 ,并 在 其 中 插入 h2 标题 和 名 为 paper 的 
DIV 容器 。 

@ 在 名 为 paper 的 DIV 容器 内 部 依次 插入 图 像 和 两 个 无 序列 表 ,具体 的 结构 代码 如 
图 4-49 所 示 。 


body> 
<aiv id="box"> 
<h2> 汽 车 报价 </h2> 
<div id="paper"> 
<div class="list"> <span> <img src="car.jpg" width="180" height="120"></span>| 
<ul> 
<1i>[ 国 内 ]<a href="#"> 雷克萨斯 NX 官 图 发 布 将 于 北京 车 展 首 发 </a></1i> 
<1i>[ 国 内 ]<a href="#"> 布加迪 将 于 北京 车 展 推出 传 亲 限量 版 车 型 </a></1i> 
<1i>[ 海 外 ]<a href="#"> 全 新 大 众 POLO SUV 新 效果 图 2015 年 发 布 </a></1i> 
<11i>[ 试 加]<a href="#"> 试 大 切诺基 3. 0TD 柴 油 版 寻找 心中 的 Jeep</a></1i> 
<1i>[ 导 购 ]<a href="#"> 精品 导购 : 23 万 进口 大 空间 省 油 城市 SUV</a></1i> 
</ul> 
</div> 
</div> 
</div> 
</body> 


图 4-49 案例 4-13 的 页 面 结构 


这 里 box 容器 的 作用 是 容纳 其 他 元 素 ;paper 容器 的 作用 是 容纳 版 块 内 的 信息 ;span 
容器 的 作用 是 容纳 图 像 ; 无 序列 表 的 作用 是 罗列 多 个 列表 项 ,之 所 以 将 各 功能 区 域 划分 得 
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这 么 细 , 主 要 是 为 了 后 期 方便 控制 各 种 元 素 。 
团 在 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-50 所 示 。 
@ 保存 当前 文件 后 ,通过 浏览 器 预览 ,效果 如 图 4-51 所 示 。 


tyle type="text/cas"> 
“{ 
padding: Opx; 
margin: Opx; 
} 
1i {list-style: none;} 
/* 设 置 列表 项 无 样式 */ 
a {text-decoration: none;) 
/* 设 置 超 链 接 无 下 划 线 */ 
a:hover {text-decoration: underline;)} 
/* 设 置 超 链 接 鼠 标 悬 停 时 有 下 划 线 */ 
img {border: 0pxz1}/* 设 置 图 像 无 边框 */ 
body { 
color: #004080; 
font-size: 14px; 
line-height: 1.8; 
}/* 设 置 主体 内 容 字号 和 行 间距 */ 
#box { 
width: S10px; 
margin: 10px auto; 
border: 1px #333 solid; 
}/* 美 化 box*/ 
#box h2 { 
line-height: 35px; 
font-size: 16px; 
padding-left: Spx; 
border-bottom: 1px #333 solid; 
)V* 设 置 标题 字号 ， 以 及 相关 美化 */ 
#paper {padding: 5px;)/* 设 置 内 边 距 5px*/ 
‘list span { 
float: left; 
margin-right: 10px; 
width: 180px; 
}/* 设 置 图 像 左 浮动 ， 且 距 右边 文 字 10 像 素 距离 */ 


</style> 


图 4-50 案例 4-13 的 CSS 规则 图 4-51 图 文 混 排 预 览 效 果 
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[国内 ] 雷克萨斯 Rx 官 图 发 布 将 于 北京 车 展 首发 
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4.3 ”过 程 指 导 一 一 使 用 HTML 5 新 增 元 素 创建 “灯塔 
漫画 背景 博客 ” 


本 节 运 用 HTML 5 新 增 的 结构 性 元 素 ( 如 section 元 素 ,article 元 素 和 footer 元 素 ) 
创建 一 个 典型 的 博客 页 面 , 这 些 结构 性 元 素 能 够 让 网 页 的 整体 结构 更 加 直观 和 明确 ,更 加 
富有 语义 效果 。 


4.3.1 过 程 分 析 


通过 对 实际 任务 的 理解 ,本 节 需 要 完成 的 页 面 最 终 效果 如 图 4-52 所 示 。 

从 页 面 整个 布局 来 看 ,主体 内 容 采 取 左 右 两 列 分 布 的 形式 , 左 侧 为 博客 栏目 的 导航 ， 
右 侧 为 博客 内 容 列 表 的 主体 区 域 。 通 过 深思 熟 虑 ,页 面 布局 如 图 4-53 所 示 。 请 读者 仔细 
观察 ,页 面 布局 所 使 用 的 结构 性 元 素 。 
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图 4-52 页 面 最 终 效果 


4.3.2 步骤 详解 


1. 前 期 准备 工作 
(1) 启动 Dreamweaver CS6 ,在 菜单 栏 中 执行 “站 点 ”>“ 新 建站 点 ”命令 ,在 弹出 的 对 


话 框 中 设置 站 点 名 称 及 路 径 。 
(2) 在 站 点 中 创建 images 和 style 两 个 文件 夹 ,分 别 存放 页 面 修饰 图 片 和 CSS 样式 
文件 。 


(3) 在 Dreamweaver CS6 的 菜单 栏 中 执行 “文件 ”>“ 新 建 "命令 ,在 弹出 的 对 话 框 中 
选择 “空白 页 ”标签 ,“ 页 面 类 型 "选择 HTML,“ 布 局 ”选择 “无 ”,“ 文 档 类 型 "选择 HTML 5, 最 
后 单 击 “ 创 建 ” 按 钮 ,创建 一 个 空白 文档 ,并 命名 为 index. html。 

(4) 创建 一 个 外 部 CSS 样式 表 文 件 ,将 这 个 CSS 文件 保存 在 站 点 的 style 文件 夹 下 ， 
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<section id="page"> 


<div id="pagewrap"> 


<section id="contents"> 


<header id="mainheader"> 


<section id="sidebar"> 


<section id="main"> 


<article class="post"> 


<header> 


<section class="entry"> 


<article class="post"> 


<header> 


<section class="entry"> 


<article class="post"> 


<header> 


<section class="entry"> 


<footer id="pagefooter"> 


4-53 ”页 面 布局 示意 图 


并 命名 为 style. css。 

(5) 在 Dreamweaver CS6 的 “CSS 样式 ”面板 
中 , 单 击 “ 附 加 样式 表 ” 按 钮 圈 , 弹 出 “链接 外 部 样式 
表 ” 对 话 框 ,将 之 前 创建 的 style. css 外 部 样式 文件 
链接 到 index. html 页 面 。 


2. 页 面 初始 化 与 左 侧 边栏 的 制作 

(1) 在 index. html 文件 的 源 代码 编辑 状态 中 ， 
手动 创建 如 图 4-54 所 示 的 页 面 基本 结构 。 在 该 页 
面 结构 中 ,一 section id 一 "page" 二 标签 用 于 控制 整 
个 页 面 对 象 ,二 div id 王 "pagewrap" 二 标签 作为 当 
前 页 面 的 外 包 庄 出 现 , 一 section id 一 "sidebar" 之 标 
签 作为 盛 放 侧 边栏 内 容 的 容器 出 现 。 

(2) 进入 style. css 的 编辑 状态 ,创建 页 面 初 始 


FEsayy 
|<section id="page"> 
<div id="pagewrap"> 
<section id="sidebar"> 
<h2> 博 文 分 类 </h2> 
<ul> 
<1i><a href="#"> 心 情 传说 </a></11i> 
<1li><a href="#"> 人 生地 事 </a></1i> 
<1li><a href="#"> 社 会 百 象 </a></1i> 
<1i><a href="#"> 穿 衣 戴 帐 c/a></1i> 
</u1> 
<h2> 特 色 博文 </h2> 
<ul> 
<1i><a href="#"> 影 评 博文 </a></1i> 
> 思绪 飞扬 </a></1i> 
<1li><a href="#"> 生 活 旅行 </a></11i> 
</u1> 
</section> 


4-54 左 侧 边栏 页 面 结构 
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相关 规则 ,以 及 目标 容器 的 CSS 规则 ,如 图 4-55 和 图 4-56 所 示 。 保 存 当 前 页 面 ,预览 效 
果 如 图 4-57 所 示 。 


“Tt 
padding: 0; 
margin: 0; 
}/* 设 置 页 面 所 有 元 素 内 外 边 距 均 为 0*/ 
“Clear { 
clear: boch; 
}/* 创 建 clear 类 ， 用 于 青 除 浮动 时 使 用 */ 
a {color: #F30;) 
lhi, h2, h3 { 
font-family: "微软 雅 黑 "; 
font-weight: bold; 


} 
boay { 
background: url(../images/htmlbg.jpg) repeat; 
font-family: "微软 雅 黑 "; 
font-size: 14px; 
Color: #443f36; 
)/* 设 置 页 面 初始 外 观 ， 增 加 米色 背景 图 像 */ 
#page { 
background: urll(../images/wrapbg.jpg) left top no-repeat 
width: 943px; 
margin: 0 0 25px 0; 
}/* 设 置 容器 的 宽度 ， 并 载 入 背景 图 像 ， 该 图 像 以 左上 角 为 原点 对 齐 放置 */ 
#pagewrap { 
padding-top: 150px; 


) 
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#sidebar { 
width; 139px; 
floac: left; 
padding: 165px 10px 10px 10px; 
text-align: righ’ 
}/* 设 置 左 便 边栏 的 宽度 和 浮动 规则 */ 
#sidebar h2 { 
display: block; 
font-weight: bold; 
color: #000; 
margin-bottom: 10px; 


font-size: 2em;/* 设 置 字体 大 小 为 原始 大 小 的 2 倍 */ 


} 
#sidebar ul { 

margin-bottom: 20px; 

list-style: none;/* 青 除 无 序列 表 原 有 风格 样式 */ 
} 
#sidebar 1i a{ 

display: block; 

height: 25px; 

line-height: 25px;/* 将 行 高 设置 为 与 a 元 素 一 样 的 高 度 ， 使 其 中 的 文字 生 直 暗示 */ 

background: url(../images/sidebarli.png) right center no-repeat; 

padding-right: 12px; 

color: #585247; 

text-decoration: nane;:/* 清 除 超 链 接 默认 下 划 线 外 观 显示 */ 


图 4-56 侧 边 栏 相关 CSS 规则 


3. 博客 主体 区 域 的 制作 

(1) 进入 index. html 文件 的 源 代 码 编辑 状态 ,在 二 section id 一 "sidebar" 之 的 结束 标 
签 后 面 ,插入 id 王 "contents" 的 section 容器 。 

(2) 在 二 section id 一 "contents" 盖 标签 内 部 ,插入 id 一 "mainheader" 的 header 容器 ， 


第 4 章 文本 与 图 像 
并 在 其 中 使 用 hl 元 素 创建 博客 的 标题 ,此 时 页 面 结构 如 图 4-58 所 示 。 


[<section id="page"> 
<div id="pagewrap"> 
<section id="sidebar"> 
</section> 
<section id="contents"> 
<header id="mainheader"> 


<hl>Yuze<span>B10g</span></hl: 
</header> 


</section> 


图 4-57 ” 侧 边 栏 预览 效果 图 4-58 博客 标题 的 页 面 结构 


(3) 进入 style. css 的 编辑 状态 ,创建 相关 CSS 规则 ,如 图 4-59 所 示 。 保 存 当 前 页 
面 ,预览 效果 如 图 4-60 所 示 。 


#contents { 
float: left; 
width: 620px; 


} 

#contents p {line-height: 18px;} 

#mainheader { 
background: url(../images/headerbg.png) no-repeat;| 
height: 205px; 

》 

#mainheader hi { 

display: block; 

padding: 70px 70px 0 35px; 

color: #£4731d; 

font-size: 5.2em!important;/* 设 置 字体 大 小 为 原始 大 

小 的 5.2 倍 ， 并 且 指定 该 规则 优先 级 最 高 */ 

} 

#mainheader hi span { 

color: #302c24; 

font-weight: normal!important;/* 设 置 字体 粗细 风格 为 

普通 显示 ， 并 且 指 定 该 规则 优先 级 最 高 */ 

} 


图 4-59 博客 标题 的 CSS 规则 
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4-60 博客 标题 的 预览 效果 


(4) 在 名 为 mainheader 的 header 容器 的 后 面 ,插入 名 为 main 的 section 容器 ,并 在 
其 中 使 用 article 元 素 创 建 博客 文章 的 整体 框架 ,具体 的 页 面 结构 如 图 4-61 所 示 。 切 换 到 
style. css 文档 中 ,创建 与 博客 主体 区 域 相 关 的 CSS 规则 ,如 图 4-62 所 示 。 


0 


Fsection id="main™> 
<article class="post"> 
<header> 
<h2><a href="#">| 0 </a></h2> 


<p>wuyuze | 


<time>2015 年 5 月 17 日 </time> 一 一 一 一 一 全 一 这 里 存放 博客 文章 的 辅助 信息 
1 ”10635 人 已 阅读 </p> 
</header> 
<section class="entry"> 一 一 一 一 一 一 一 必 一 这 里 存放 博客 文章 的 内 容 摘要 
p> 区 2555 生 开 s <a nrer-"#"> 阅 全文 </a></p> 
</section; 
/orcicle> 


l/section> 


图 4-61 博客 主体 区 域 的 页 面 结 构 


(5) 保存 当前 页 面 ,预览 的 效果 如 图 4-63 所 示 。 

(6) 根据 页 面 布 局 规划 可 知 ,博客 主体 区 域 的 其 他 文章 列表 与 之 前 创建 的 列表 结构 
相同 ,这 里 只 须 将 步骤 (4) 中 制作 完成 的 博客 文章 结构 复制 多 个 即 可 。 

4. footer 区 域 的 制作 

(1) 在 名 为 main 的 section 容器 后 面 .插入 名 为 pagefooter 的 footer 容器 。 
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[aain 1 
background: url(../images/pagebg.gif) 
repeat-y; 
padding: 35px; 


-post { 
margin-bottom: 15px; 
padding-bottom: 15px; 
border-bottom: solid 1px #ccc6b5;/* 设 
置 边 框 外 观 为 1 像素 粗细 ， 实 线 显示 */ 


ar header {margin-bottom: 15px;) 
st header p { 

margin-bottom: 0!important; 
display: block; 

font-size: 1.1em; 


display: block; 

font: normal 2em "微软 雅 黑 "; /* 设 置 字体 
相 细 、 大 小 和 字体 效果 */ 

color: #262119; 
.post header h2 a { 

text-decoration: none; 


color: #262119; 


.encry p {margin-bottom: 10px; 


图 4-62 博客 主体 区 域 相关 的 CSS 规则 


YuzeBlog 


互联 网 20 年 :人 类 ， 因 为 互联 网 ， 而 有 福 了 


wuyuze | 2015 年 5 月 17 日 |10635 人 已 阅读 


从 2009 年 开始 ,中国 互联 网 公司 ,市值 从 几 十 亿美 全 ,一 跃 超过 百 亿 并 进入 500 亿 甚至 一 
千 亿美 元 俱乐部 。2014 年 阿里 巴巴 的 上 市 ， 最 乐观 的 估计 已 经 是 2000 亿 美元 俱乐部 。 中 
国 互联 网 公司 巨头 们 ， 因 为 互联 网 而 有 福 了 。 阅 这 全 文 


4-63 博客 主体 区 域 的 预览 效果 


(2) 在 footer 容器 中 ,根据 需要 插入 相关 版 权 内 容 即 可 ,此 时 的 页 面 结构 如 图 4-64 
所 示 。 
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(3) 切换 到 style. css 文档 中 ,创建 与 footer 容器 相关 的 CSS 规则 ,如 图 4-65 所 示 。 
最 后 ,保存 当前 页 面 , 通 过 浏览 器 预览 读者 即 可 看 到 最 终 效果 。 


} 


footer 1d-"pagefooter"> 
<div class="footerwrap"> 


</div> 
</footer> 


图 4-64 footer 区 域 页面 结 构 


<p class="siteinfo"> 2015 &copy; All Rights Reserved | 宇 泽 互联 </p; 


和 ageFoocer 
url(. ./images/foorerbg.jpg) 


no-repeat; 


,footerwrap { 


.siteinfo { 


background: 


height: 132px; 


height: 112px; 
margin-bottom: Spx; 


display: block; 
color: #fff; 
font-size: 1.2em; 
padding: 50px 0 0 0; 
text-align: center; 


图 4-65 与 footer 容器 相关 


的 CSS 规则 


至 此 ,使 用 HTML 5 新 增 结构 性 元 素 创建 的 博客 页 面 已 经 制作 完成 了 ,读者 在 制作 
过 程 中 需要 体会 结构 性 元 素 给 页 面 带 来 的 语义 。 


4.4 自主 任务 


图 像 与 文本 的 简单 应 用 


根据 本 章 知 识 的 讲解 ,读者 应 该 掌握 图 像 与 文本 在 网 页 中 是 如 何 被 CSS 控制 和 美化 
的 ,本 节 通 过 一 个 布局 简单 的 页 面 , 进 一 步 巩固 与 图 像 和 文本 相关 的 CSS 知识 ,页 面 最 终 
效果 如 图 4-66 所 示 ,布局 如 图 4-67 所 示 。 


4-66 


Sa 
Et ， 生 们 司 F ， 寻 丰富 ， 村 全 宙 FhE ， 标 人生 HE， 标 攻 和 
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EEN a 
入， 标 革 和 站 和 ， 术 宇和 二, 标 丰 字 和 
A 


图 像 与 文本 的 简单 应 用 最 终 效 果 
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header 
container 
lds content 
banner 
inside 
footer 


图 4-67 布局 示意 图 


4.5 习题 


. 如何 批量 蔡 换 页 面 中 的 文本 ? 

text-indent 属性 用 于 控制 什么 ? 

. 什么 是 锚 链 接 ? 它 与 普通 的 文本 链接 有 何 异同 ? 
text-shadow 属性 用 于 控制 什么 ? 

.对 某 个 DIV 容器 附加 两 个 背景 图 像 时 ,会 有 什么 效果 ? 
. 图 文 混 排 的 核心 要 素 是 什么 ? 

.如 何在 页 面 中 插入 如 图 4-68 所 示 的 特殊 字符 ? 

. 按照 图 4-69 所 示 内 容 , 制 作 图 文 混 排 效果 的 列表 。 


[ee 


网 页 设计 与 制作 

本 书 是 一 本 基于 Yet 标 准 的 运用 
Css 制 作 网 站 的 教材 。 本 书 由 吴 
直 编 写 ; 全 书 以 实例 为 主 ， 从 理 
论 到 实践 ， 使 读者 重新 认识 网 页 
制作 过 程 
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图 4-68 习题 7 图 图 4-69 习题 8 图 
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9. 使 用 CSS 规则 对 页 面 中 的 图 像 和 文本 加 以 控制 ,制作 如 图 4-70 所 示 的 页 面 。 


EU 
rT ， 信 于 


四， 你 要 世 有 人 三室 当 。 站 加 主 关 /了 主 
人 后 有 所 二 和。 当下 区 和 宇 全， 下 人 可 以 
5 有 下 有 要 地 玉音 妆 扣 全 和 宇 失 理 
Ca Ror ADE 


人 rT 
RR 


ON 
层 


ROA 


新 闻 


EE 气 雍 好 的 先 启 惊人 呆 对 衣 品 大 全 性 的 扩 思 


人 是 了 时 审理 和 中 三 
7 
4 
i 
于 有 2 :公所 


bi 
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【本 章 导 读 】 

CSS 中 的 浮动 和 定位 具有 重要 意义 和 作用 ,通过 具体 的 参数 设置 可 以 实现 页 面 布局 
的 多 样 变化 ,而 列表 元 素 在 页 面 布局 中 也 非常 实用 ,常见 的 导航 栏 、 新 闻 列 表 和 图 文 信息 
列表 都 是 通过 列表 元 素 作 为 骨架 而 搭建 的 。 

【学 习 目标 】 

名 掌握 float 浮动 属性 的 相关 概念 和 使 用 方法 ; 

名 了 解 有 关 定位 的 基本 知识 ,能 够 使 用 相对 定位 和 绝对 定位 实现 网 页 效果 ; 

名 掌握 多 种 列表 样式 的 使 用 方法 。 


5.1 浮动 


CSS 中 的 浮动 (float) 属 性 能 够 使 应 用 该 属性 的 元 素 脱离 当前 文本 流 , 向 左 或 向 右 移 
动 直到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮动 框 的 边框 为 止 。 


5.1.1 浮动 的 基本 知识 


当 某 个 元 素 被 赋予 浮动 属性 后 ,该 元 素 就 会 生成 一 个 块 级 框 ,脱离 并 悬浮 在 文本 流 
上 方 。float 属性 有 四 个 可 用 的 值 : left 和 right 属性 值 分 别 浮动 元 素 到 各 自 的 方向 ， 
none( 默 认 值 ) 属 性 值 使 元 素 不 具有 浮动 效果 ,inherit 属性 值 将 会 从 父 级 元 素 获取 
float 值 。 


1. 左 ( 右 ) 浮 动 

当 某 个 元 素 具 有 向 左 ( 右 ) 浮 动 的 属性 ,那么 该 元 素 便 脱 离 当 前 文档 流向 左 ( 右 ) 移 动 ， 
直到 碰 到 左 ( 右 ) 边 缘 。 

【案例 5-1】 左 ( 右 ) 浮 动 。 

@ 启动 Dreamweaver CS6, 创建 空白 HTML 5 文 ee class="clearfix" >| 
档 , 在 代码 视图 中 ,创建 一 组 嵌 套 的 DIV 容器 ,具体 结构 < en 


代码 如 图 5-1 所 示 。 </div> 


@ 在 代码 视图 中 ,在 本 页 面 head 区 域 创建 相关 CSS se 
规则 ,如 图 5-2 所 示 。 图 5-1 案例 51 的 页 面 结构 
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@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 5-3 所 示 。 


<style type="text/css"> 
body { 
font-size:22px; 


} 

#box { 
width:400px; 
border:2px #F60 dotted; 


} 

#box-1 { 
width:100px; 
height:100px; 
border:2px #36F dotted; 
margin:10px; 


} 
#box-2 { 
width:100px; 
height:100px; 
border:2px #36F dotted; 
margin:10px; 
} 
#box-3 { 
width:100px; 
height:100px; 
border:2px #36F dotted; 
margin:10px; 
} 
</style> 


图 5-2 案例 5-1 的 CSS 规则 图 5-3 案例 5-1 的 初始 预览 效果 


@ 将 名 为 box_1 的 DIV 容器 增加 “float: right;” 属 性 ,这 时 box_1 便 脱 离 文档 流向 
右 移动 ,直到 它 的 右边 缘 碰 到 box 容器 的 右边 框 为 止 ,如 图 5-4 所 示 。 


图 5-4 ”box_1 向 右 浮动 


加 为 名 为 box_2 的 DIV 容器 增加 “float: left;” 属 性 ,这 时 box_2 便 脱离 文档 流向 左 
移动 ,直到 它 的 左边 缘 碰 到 box 容器 的 左边 框 为 止 ,如 图 5-5 所 示 。 需 要 特别 注意 的 是 ， 
由 于 box_2 不 再 处 于 文档 流 中 ,所 以 它 不 占据 空间 ,实际 上 覆盖 了 box_3, 致 使 box_3 从 
视图 中 消失 。 
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图 5-5 box_2 向 左 浮动 


@@ 删除 之 前 为 box_1 和 box_2 增加 的 浮动 属性 。 统 一 为 box_1、box_2 和 box_3 增 
加 “float:left;” 属 性 。 

这 时 box_1 向 左 浮动 直到 碰 到 左边 框 时 静止 ,另外 两 个 元 素 也 向 左 浮动 ,直到 碰 到 
前 一 个 浮动 框 也 静止 ,如 图 5-6 所 示 ,最 终 将 纵向 排列 的 DIV 容器 变 成 了 横向 排列 。 


图 5-6 所 有 元 素 向 左 浮动 


细心 的 读者 可 以 发 现 ,由 于 box_1、box_2 和 box_3 均 拥有 向 左 浮动 的 属性 ,集体 脱 
离 了 文档 流 , 致 使 包含 这 3 个 容器 的 父 级 容器 box 内 部 没有 任何 内 容 , 所 以 box 被 简化 为 
一 条 线 位 于 页 面 项 部。 解决 这 种 情况 的 方法 是 针对 box 容器 编写 清除 浮动 的 CSS 规则 ， 
如 图 5-7 所 示 , 最 后 的 预览 效果 如 图 5-8 所 示 。 


clearfix:after T 
content: mn 
visibility: hidden; 
display: block; 
height: 0; 
clear: both: 


5-7 清除 浮动 图 5-8 案例 5-1 的 最 后 预览 效果 
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2. 浮动 时 空间 不 够 的 情况 

当 父 级 容器 宽度 无 法 容纳 其 内 部 浮动 元 素 并 列 放置 时 ,部 分 浮动 元 素 将 会 向 下 移动 ， 
直到 有 足够 的 空间 放置 它们 。 

【案例 5-2】 浮动 时 空间 不 够 的 情况 。 

@ 修改 案例 5-1 的 CSS 代码 ,将 box 的 宽度 设置 为 "width:300px;”, 这 时 无 法 并 列 
放置 所 有 元 素 , 通 过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-9 所 示 。 

@ 将 box_1 容器 的 高 度 设 置 为 “height:150px;”, 这 时 box_1 高 度 增加 ,挡住 了 box_3 
容器 ,致使 box_3 停留 在 box_2 容器 的 下 方 , 如 图 5-10 所 示 。 


六 浮动 时 空间 不 够 的 情况 
Ca 


图 5-9 ”水平 空间 有 限时 的 状态 图 5-10 ”水平 空 间 有 限 且 不 同 高 度 的 浮动 元 素 


5.1.2 清除 浮动 


虽然 浮动 属性 的 确 能 帮助 设计 者 实现 良好 的 布局 效果 ,但 如 果 使 用 不 当 就 会 导致 页 
面 出 现 错位 的 现象 。 这 时 就 要 将 某 些 元 素 的 浮动 属性 清除 ,以 解决 页 面 错位 的 现象 。 

清除 浮动 主要 利用 的 是 clear 属性 中 的 both( 左 右 两 侧 均 不 允许 浮动 元 素 ) \left( 左 
侧 不 允许 浮动 元 素 ) 和 right( 右 侧 不 允许 浮动 元 素 )3 个 属性 值 清除 由 浮动 产生 的 效果 。 

【案例 5-3】 清除 浮动 。 

Q@ 使 用 案例 5-1 的 页 面 内 容 继续 制作 ,在 box_3 的 后 面 再 增加 一 个 块 级 元 素 box_4， 
此 时 页 面 结构 如 图 5-11 所 示 。 

@ 在 页 面 的 head 区 域 ,增加 box_4 的 CSS 规则 ,如 图 5-12 所 示 。 


<body> 
<aiv id="box" class="clearfix" > #box-4 { 
<div id="box-1">box_1</div> width:370px; 
<div id="box-2">box_2</div> height :50px; 
<div id="box-3">box 3</div> 
<div id="box-4">box 4</div> 
</div> 
</body> 


图 5-11 案例 5-3 的 页 面 结构 5-12 案例 5-3 的 CSS 规则 


margin:10px; 
background:#F90; 
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@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 5-13 所 示 。 这 里 由 于 
box_4 并 没有 设置 浮动 ,虽然 独占 一 行 ,但 整体 却 跑 到 了 页 面 项 部 ,并 且 被 之 前 的 元 素 所 
盖 , 出 现 了 非常 严重 的 页 面 错位 现象 。 


图 5-13 案例 5-3 的 预览 效果 


@ 要 解决 这 种 问题 ,就 必须 清除 左右 浮动 才能 让 新 增 的 块 级 元 素 处 于 正确 的 位 置 。 
因此 必须 在 box_4 的 CSS 样式 规则 中 添加 “clear:both;” 规 则 。 应 用 该 规则 后 ,box_4 容 
器 之 前 的 浮动 全 部 被 清除 ,通过 预览 即 可 看 到 效果 ,如 图 5-14 所 示 。 


图 5-14 清除 浮动 后 的 效果 


5.2 定位 


position( 定 位 ) 属 性 能 够 帮助 设计 者 对 页 面 中 的 各 种 元 素 定义 其 应 该 出 现 的 位 置 , 在 
CSS 布局 过 程 中 实用 性 很 强 。 通 过 使 用 position 属性 ,可 以 选择 4 种 不 同类 型 的 定位 模 
式 , 详 见 表 5-1 所 示 。 


5.2.1 静态 定位 与 固定 定位 


1. 静态 定位 
静态 定位 是 position 属性 的 默认 值 ,没有 特殊 的 定位 含义 。 在 不 重新 定位 的 情况 下 ， 
即便 对 某 一 元 素 应 用 了 静态 定位 (position:static; ) ,页 面 布局 也 不 会 有 任何 变化 。 


-a 
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表 5-1 position 属性 


属性 值 含 芭 

static position 属性 的 默认 值 ,无 特殊 定位 

relative 相对 ,元 素 虽然 偏 移 某 个 距离 ,但 仍然 占据 原来 的 空间 

absolute 绝对 ,元 素 在 文档 中 的 位 置 会 被 删除 ,定位 后 元 素 生成 一 个 块 级 元 素 


固定 ,元 素 框 的 表现 类 似 于 将 position 设置 为 absolute, 元 素 被 固定 在 屏幕 的 某 个 
位 置 , 不 随 滚动 条 滚动 


fixed 


2. 固定 定位 

如 果 某 一 元 素 应 用 了 固定 定位 (position:fixed) ,那么 当 页 面 发 生 滚动 时 ,该 对 象 依然 
会 停留 在 原 有 的 位 置 上 ,相对 于 整个 浏览 器 来 说 没有 发 生 移动 。 

【案例 5-4】 静态 定位 与 固定 定位 。 

@ 启动 Dreamweaver CS6, 创 建 空白 HTML 5 文档 。 在 文档 中 依次 创建 3 个 相互 
并 列 的 DIV 容器 ,页 面 结 构 如 图 5-15 所 示 。 

@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 根 据 需要 这 里 对 boxl 应 用 静态 定 
位 ,对 box2 不 应 用 任何 定位 ,对 box3 应 用 固定 定位 ,具体 代码 如 图 5-16 所 示 。 


style type="text/css"> 
#boxl { 
width: 200px; 
height: 200px; 
padding: Spx; 
margin-right: 10px; 
background-color: #9C0; 
float: left; 
Position: static; 
} 
#box2 1{ 
width: 200px; 
height: 2000px; 
/* 此 处 设置 高 度 是 为 了 让 浏览 器 出 现 纵向 的 滚动 条 */ 
margin-right: 10px; 
padding: Spx; 
background-color: #FFO; 
float: left; 


} 
#box3 { 
width: 200px; 
height: 200px; 
padding: Spx; 
background-color: #9C0; 
float: left; 


<body> position: fixed;/* 固 定 定 位 */ 
<div id="box1"> 应 用 殉 访 定位 的 容器 box1i</div>| top:; 10px;/* 距 顶部 10px 的 距离 */ 
<div id="box2"> 没 有 应 用 定位 的 容器 box2</div>| left: 450px;/* 距 左 侧 450px 的 距离 */ 
<div id="box3"> 应 用 固定 定位 的 容器 box3</div>| ) 
</body> /style> 

图 5-15 案例 5-4 的 页 面 结构 图 5-16 案例 5-4 的 CSS 规则 


@ 保存 当前 页 面 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-17 所 示 。 

本 案例 中 由 于 box2 设置 了 足够 高 的 高 度 , 所 以 使 得 浏览 器 出 现 纵向 滚动 条 。 当 向 
下 滚动 页 面 时 可 以 清楚 地 发 现 ,boxl 和 box2 跟随 浏览 器 页 面 的 滚动 而 滚动 ,而 box3 仍 
然 位 于 屏幕 同样 的 地 方 。 
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5-17 静态 定位 与 固定 定位 预览 效果 


需要 特别 指出 的 是 ,IE 6 及 更 早 版 本 的 浏览 器 不 支持 固定 定位 ,读者 需要 更 新 浏览 
器 版 本 或 者 采用 其 他 浏览 才能 看 到 此 示例 的 效果 。 


5.2.2 相对 定位 与 绝对 定位 


在 实际 工作 中 ,相对 定位 与 绝对 定位 的 使 用 效率 很 高 , 某 些 特殊 效果 需要 使 用 该 类 型 
的 定位 去 解决 ,而 且 这 两 种 定位 通常 搭配 使 用 。 


1. 相对 定位 (position :relative) 

相对 定位 指 的 是 让 元 素 本 身 “ 相 对 于 ” 它 原 始 的 起 点 进行 定位 。 应 用 相对 定位 的 元 
素 ,即便 赋予 新 的 位 置 值 , 但 仍然 占据 原来 的 位 置 空间 。 

【案例 5-5】 相对 定位 。 

@ 启动 Dreamweaver CS6, 创 建 空白 HTML 5 文档 。 在 文档 中 依次 创建 3 个 相互 
并 列 的 DIV 容器 ,页 面 结构 如 图 5-18 所 示 。 

@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 根 据 需 要 这 里 对 boxl 和 box3 不 应 
用 任何 定位 ,对 box2 应 用 相对 定位 ,具体 代码 如 图 5-19 所 示 。 


Fstyle type="text/css"> 
#boxl { 
width: 200px; 
height: SOpx; 
background: #FCO; 
) 
box2 { 
width: 200px; 
height: 100px; 
background: #F60; 
position; relative; 
/* 相 对 于 原 有 位 置 进行 相对 定位 */ 
top: 30px;/* 距 顶部 30 像 素 */ 
left: 100px;/* 距 左 创 100 像 素 */ 
} 
#box3 + 


body> width: 200px; 
|<aiv id="box1"> 没 有 应 用 定位 的 元 素 box1</div>| height: SOpx; 
|<aiv id="box2"> 应 用 相对 定位 的 元 素 box2</div>| background: #FCO; 
|<aiv id="box3"> 没 有 应 用 定位 的 元 素 box3</div>| } 

/body> /style> 


图 5-18 案例 5-5 的 页 面 结构 图 5-19 案例 5-5 的 CSS 规则 


~、 
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@ 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-20 所 示 。 

在 预览 效果 中 可 以 发 现 ,box2 元 素 由 于 应 用 了 相对 定位 ,致使 容器 本 身 向 右 、 向 下 各 
移动 了 一 定 的 距离 ,而 原始 的 位 置 空间 并 未 被 取代 ,在 应 用 新 的 位 置 坐标 后 ,还 遮盖 了 
box3 的 一 部 分 内 容 。 


2. 绝对 定位 (position :absolute) 

默认 状态 下 绝对 定位 是 依据 浏览 器 左上 角 的 0 点 开始 计算 的 。 应 用 绝对 定位 的 元 素 
可 以 被 放置 在 页 面 中 的 任何 位 置 ,并 且 多 个 对 象 可 以 进行 层 芭 , 层 倒 的 顺序 由 z-index 属 
性 控制 ,z-index 值 越 高 其 位 置 就 越 高 。 

【案例 5-6】 绝对 定位 。 

OO 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 依次 创建 4 个 相互 
并 列 的 DIV 容器 ,页 面 结 构 如 图 5-21 所 示 。 

@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 根 据 需 要 这 里 对 boxl 和 box3 不 应 
用 任何 定位 ,对 box2 和 box4 应 用 绝对 定位 ,具体 代码 如 图 5-22 所 示 。 


[seyie type="text/css"> 
#box1 { 
width:200px; 
height :50px; 
background:#FCO; 
margin-bottom: 10px; 
} 
#box2 { 
width:200px; 
height :S50px; 
background:#F60; 
Position:absolute; 
/* 参 照 浏览 器 左上 角 进 行 绝对 定位 */ 
top:100px;/* 距 顶部 100 像 素 */ 
lefc:195px;/* 距 左 创 195 像 素 */ 
》 
#box3 { 
width:200px; 
height :SOpx; 
background; #6C9; 
} 
#boxa { 
图 5-20 相对 定位 预览 效果 width:200px; 
height: SOpx; 
background:#FCO: 


<5aayy position:absolute; 
<qiv id="box1"> 没 有 应 用 定位 的 元 素 box1</div; /** 曾 照 浏览 器 左上 和 角 进 行 绝对 定位 */ 
<div id="box2"> 应 用 绝对 定位 的 元 素 box2</div>| top;130px; /* 距 顶部 130 像 素 */ 
<div id="box3w> 没 有 应 用 定位 的 元 素 box3</divy| left:220px;/* 距 左 侧 220 像 素 */ 
<div id="box4"> 应 用 绝对 定位 的 元 素 box4</div; } 

</body> [c/style> 


图 5-21 案例 5-6 的 页 面 结构 图 5-22 案例 5-6 的 CSS 规则 


@ 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-23 所 示 。 

在 预览 效果 中 可 以 发 现 ,box2 和 box4 元 素 由 于 应 用 了 绝对 定位 ,不 仅 向 右 、 向 下 各 
移动 了 一 定 的 距离 ,而且 参照 原点 还 是 浏览 器 的 左上 角 。 由 于 box4 容器 在 box2 容器 后 
面 ,致使 同样 应 用 绝对 定位 的 box4 容器 覆盖 在 box2 容器 上 面 。 

若 要 改变 这 种 层 琶 顺序 ,可 以 分 别 在 CSS 样式 规则 中 对 box2 和 box4 元 素 增加 “z- 
index:101;” 和 “z-index:100;” 规 则 , 即 可 实现 box2 覆盖 box4 的 效果 。 本 案例 中 z-index 
的 数值 可 以 任意 设置 ,数值 越 大 越 接近 顶层 ,数值 越 小 越 接近 底层 。 
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top:100px; 


left:195px; 


5-23 绝对 定位 预览 效果 


3. 相对 定位 与 绝对 定位 的 混合 使 用 

在 实际 工作 中 发 现 , 仅 使 用 相对 定位 ,或 仅 使 用 绝对 定位 的 情况 下 ,如 果 浏 览 器 放大 
或 缩小 ,应 用 定位 的 元 素 有 时 会 跟随 浏览 器 的 放大 或 缩小 改变 其 位 置 ,不 能 满足 实际 需 
要 ,相对 定位 与 绝对 定位 的 混合 使 用 能 解决 这 个 问题 。 

例如 要 让 YY 容器 相对 于 其 父 级 容器 X 进行 绝对 定位 ,那么 X 容器 自身 需要 设置 为 相 
对 定位 ,Y 容器 自身 需要 设置 为 绝对 定位 ,这 就 是 相对 定位 与 绝对 定位 的 混合 使 用 。 这 里 
通过 实例 进一步 说 明 。 

【案例 5-7】 相对 定位 与 绝对 定位 的 混合 使 用 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 依次 创建 2 个 父子 
关系 的 DIV 容器 ,页 面 结构 如 图 5-24 所 示 。 [aa 


a 
; vv id="Xn>X 容 器 是 Y 容 器 的 父 一 级 容器 
@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 | 和 攻 >x 吕 是 x 罕 的 了 罕 知 caivy 


根据 需要 这 里 对 父 级 X 容器 应 用 相对 定位 ,对 子 级 Y 2、 
容器 应 用 绝对 定位 ,具体 代码 如 图 5-25 所 示 。 5-24 案例 5-7 的 页 面 结构 


@ 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 效 
果 , 如 图 5-26 所 示 。 


style type="text/css"> 

#X { 
width: 200px; 
height: 200px; 
background: #FCO; 
Position: relative; 
padding: Spx; 
margin: 0 auto; 


} 
#Y 1 
width: 80px; 
height: 80px; 
padding: Spx: 
background: #F60; 
position: absolute; 
/7* 参 照 父 级 容器 X 进 行 绝对 定位 */ 
top: 50px;/* 距 项 部 50 像 素 */ 
lefc: 100px;/* 距 左 便 100 像 素 */ 


[</style> 


图 5-25 案例 5-7 的 CSS 规则 图 5-26 案例 5-7 的 最 终 预览 效果 
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在 预览 效果 中 可 以 发 现 ,Y 容器 的 参照 物 是 其 父 容器 X, 设 置 的 top 和 left 值 也 是 相 
对 于 X 容器 而 言 的 , 即 X 容器 处 于 页 面 中 的 任何 位 置 ,Y 容器 相对 于 X 容器 的 距离 都 是 
不 变 的 。 

通过 相对 定位 与 绝对 定位 的 混合 使 用 ,能 够 使 页 面 元 素 精确 地 被 放置 在 需要 的 位 置 ， 
而 不 受 外 界 因素 干扰 ,这 种 处 理 问题 的 方法 在 工作 中 经 常 遇 到 。 


s.3 列表 


列表 包括 无 序列 表 、 有 序列 表 和 自 定义 列表 ,但 无 论 何 种 类 型 的 列表 ,其 骨架 结构 都 
十 分 相似 ,在 网 页 制作 中 具有 重要 的 实际 意义 。 

本 书 第 2 章 中 已 经 对 列表 进行 了 简单 的 讲解 ,这 里 结合 工作 中 的 实际 经 验 , 以 及 相关 
的 CSS 知识 向 读者 进一步 讲解 列表 的 使 用 方法 。 


5.3.1 与 列表 相关 的 CSS 属性 


在 CSS 样式 中 ,主要 是 通过 listrstyle-image 属性 \listrstyle-position 属性 和 list-style- 
type 属性 改变 列表 修饰 符 的 类 型 ,有 关 列 表 的 属性 及 其 属性 值 说 明 详 见 表 5-2 和 表 5-3。 
表 5-2 CSS 列表 属性 


属 性 说 明 
list-style 复合 属性 ,用 于 把 所 有 用 于 列表 的 属性 设置 于 一 个 声明 中 
list-style-image 将 图 像 设置 为 列表 项 标志 
list-style-position 设置 列表 项 标记 如 何 根据 文本 排列 
list-style-type 设置 列表 项 标志 的 类 型 
marker-offset 设置 标记 容器 和 主 容器 之 间 水 平 补 白 


表 5-3 常用 的 list-style 属性 值 


属性 值 说 明 
none 无 标记 ,不 使 用 项 目 符号 
disc 默认 值 。 标 记 是 实心 圆 
circle 标记 是 空心 圆 
square 标记 是 实心 方块 
decimal 标记 是 数字 
lower-roman 小 写 罗马 数字 ,如 i ii ii iv、V 等 
upper-roman 大 写 罗马 数字 ,如 I 工 、[[、 肝 .NW、V 等 
lower-alpha 小 写 英文 字母 ,如 a、b、c、d、e 等 
upper-alpha 大 写 英 文字 母 ,如 A、B、C、D\E 等 


【案例 5-8】 列表 的 简单 属性 。 


@ 启动 Dreamweaver CS6 ,新 建 HTML 5 文档 ,并 在 其 中 创建 一 组 无 序列 表 和 一 组 


第 5 章 浮动 .定位 和 列表 


嵌 套 的 有 序列 表 , 这 时 的 页 面 结构 如 图 5-27 所 示 。 


@ 在 页 面 head 区 域 分 别 创建 名 为 wx 和 yx 的 CSS 规则 ,如 图 5-28 所 示 。 


[ul id="wx" 
<13 无 序列 表 申 的 一 个 列表 项 </14 
<1i> 无 序列 表 中 的 一 个 列表 项 </11>| 
</u1> 
|<ol id="yx 
多 六 有 序列 表 </14> 
<1i> 多 级 有 序列 表 
<ol> 
<1i> 多 级 有 序列 表 </1i> 
<1i> 多 级 有 序列 表 </1i> 


</ol> 


</1i> 
<1i> 多 级 有 序列 表 </1i> 


图 5-27 案例 5-8 的 页 面 结构 


[style type="text/css"> 
#wx { 

list-style-type: circle; 
)/* 设 置 无 序列 表 样 式 为 圆圈 模式 */ 
sx 

list-style-type: upper-roman; 
}/* 设 置 有 序列 表 模 式 为 大 写 罗马 数字 */ 
</style> 


图 5-28 案例 5-8 的 CSS 规则 


@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-29 所 示 。 


从 本 例 中 可 以 看 出 ,列表 均 有 默认 的 外 观 属性 ,要 想 让 列表 呈现 出 其 他 外 观 , 还 需要 


借助 CSS 的 帮助 。 


癌 列表 的 简单 尾 # x 
4 2>CGIa 


。 无 序列 表 中 的 一 个 列表 项 
。 无 序列 表 中 的 一 个 列表 项 


I， 多 级 有 序列 表 


多 
III. 名 有 后 区 


图 5-29 案例 5-8 的 预览 效果 


5.3.2 列表 的 图 像 修 饰 符 


者 歌 快 递 更 多 ?> | 
固 沪 死 的 鱼 4 李宇春 
加 我 最 亲爱 的 + 张 吉 时 具 
回 写 在 心里 的 台 + 米 姥 
回 乏 味 4 周 传 峻 
图 星 扩 赤 #4 吴克群 
回 ican fy 我 可 以 # 陈冠希 
回 无 法 原谅 4 李 佳 碳 
回民 生 4 成 龙 
图 别 用 下 辈子 安慰 我 +。 陈 瑞 
回 泡 美女 孩 4 刘亦菲 
全 而 | | 清除 EE 


图 5-30 包含 图 像 修饰 符 的 列表 


列表 在 默认 风格 状态 下 其 外 观 不 能 满足 实际 的 美化 需要 ,设计 师 通 常 借用 某 些小 图 


像 作 为 点 缀 放 在 列表 项 前 面 或 后 面 ,如 图 5-30 所 示 。 


根据 之 前 的 知识 可 知 ,list-style-image 属性 能 够 在 列表 前 增加 图 像 修 饰 符 , 而 在 实际 
工作 中 这 个 属性 使 用 频率 并 不 多 ,其 原因 在 于 使 用 该 属性 虽然 能 够 为 列表 增加 图 像 修 饰 
符 ,但 控制 的 灵活 度 太 差 , 所 以 设计 者 通常 采用 其 他 方法 来 实现 向 列表 添加 图 像 修 饰 符 的 


效果 。 


这 里 着 重 讲解 工作 中 经 常 采 用 的 处 理 方法 ,请 读者 注意 padding-left 属性 在 案例 中 


- 
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的 应 用 ,至 于 list-style-image 属性 的 用 法 ,读者 自行 实验 即 可 ,这 里 不 再 袭 述 。 

【案例 5-9】 列表 的 图 像 修 饰 符 。 

本 案例 将 使 用 一 组 无 序列 表 制 作 常见 的 音乐 排行 榜 榜 单 ,并 且 在 每 个 列表 项 前 面 显 
示 美 化 的 背景 图 像 , 具 体操 作 如 下 。 

@ 启动 Dreamweaver CS6, 创 建新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 , 将 所 用 素 
材 复制 到 该 文件 夹 中 。 

@ 新 建 HTML 5 文档 ,创建 一 个 名 为 sidebar 的 section 容器 ,并 在 其 中 创建 一 组 无 
序列 表 , 页 面 结构 如 图 5-31 所 示 。 


body> 
<section id="sidebar"> 
<h1> 新 歌 榜 </h1> 
<ul> 
<li><a href="#"> 至 少 还 有 你 </a> <span> 姚 贝 娜 </span></1i> 


<1li><a href="#"> 时 间 都 去 哪 了 </a> <span> 王 稳 亮 </span></1i> 
<1i><a href="#"> 我 的 要 求 不 算 高 </a> <span> 黄 勤 </span></11> 
<1li><a href="#"> 障 你 走 到 底 </a> <span> 张 珊 频 </span></1i> 
<li><a href="#n> 同 点 的 你 </a> <span> 胡 夏 </span></1i> 
<1i><a href="#"> 自 由 自在 </a> <span> 凤 凰 传奇 </span></1i> 
<1i><a href="#"> 想 神 马 就 有 神 马 </a> <span> 吴 黄 息 c/span></1i>| 
<1li><a href="#"> 男 人 歌 </a> <span> 小 沈阳 </span></1i> 
<1i><a href="#"> 情 非得 已 c/a> <span> 硕 济 庆 </span></1i> 
<1i><a href="#"> 一 起 吃苦 的 幸福 </a> <span>exo</span></1i> 
</u1> 
</section> 


</body> 
图 5-31 案例 5-9 的 页 面 结构 


在 此 页 面 结构 中 ,使 用 无 序列 表 对 具体 内 容 进 行规 范 ,二 a 二 标签 中 用 于 盛 放 音乐 的 名 
称 ,二 span 记 标签 用 于 盛 放 演唱 者 的 名 字 。 此 时 通过 浏览 器 预览 的 结果 如 图 5-32 所 示 。 

@ 从 图 中 可 以 看 出 ,整体 效果 很 差 , 下 面 分 别 对 标题 ,列表 项 内 容 进行 美化 。 在 本 页 
面 顶部 的 head 区 域内 ,编写 对 应 的 CSS 样式 ,如 图 5-33 和 图 5-34 所 示 。 


[style type="text/csa"> 


margin: 0; 
padding: 0; 


text-decoration: none; 
font-size: 12px; 

} 

a:hover { 
text-decoration: underline; 
color: #F00; 


} 

#sidebar { 
width: 200px; 
border: 2px solid #999; 
margin: 10px; 

) 

#sidebar hi { 
height: 32px; 
line-height: 32px; 
font-size: 20px; 
padding-left: 10px; 
Color: #FFFFFF; 
background: url(h bg.gif) repeat-x left top;| 


) 


5-32 案例 5-9 的 当前 预览 效果 5-33 列表 的 图 像 修饰 符 的 CSS 规则 (1) 
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sidebar ui { 
height: 220px;/* 设 置 整个 列表 的 高 度 */ 


} 
#sidebar ul 1i { 

line-height: 20px; 

1ist-style: none; /* 去 除 列表 的 默认 风格 */ 
} 
#sidebar ul 1i span { 

font-size: 12px; 

color: #CCC; /* 设 置 歌手 名 字 为 灰色 */ 
} 
</style> 


padding-left:; 26px; /* 设 置 左 内 边 距 ,目的 留 出 背景 图 像 的 位 置 */ 
background: url(ul bg.gif) no-repeat 0 0;/* 设 置 列表 背景 图 像 ， 左上 角 对 齐 */| 


图 5-34 列表 的 图 像 修 饰 符 的 CSS 规则 (2) 


@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-35 所 示 。 


需要 特别 注意 的 是 ,在 CSS 样式 规则 # sidebar ul 
中 ,padding-left 和 background 属性 分 别 设置 了 文字 缩 
进 距离 和 增加 背景 图 像 的 效果 , 正 是 有 了 这 些 设置 才能 
看 到 最 终 的 效果 。 此 外 ,本 例 中 处 理 背 景 图 像 的 方法 也 
有 蜂 端 ,例如 背景 图 像 必 须 预先 调整 好 10 个 数字 之 间 的 
距离 ,而 且 如 果 增 加 了 每 个 列表 li 标签 的 高 度 , 就 要 重新 
制作 图 像 。 


5.3.3 纵向 导航 


导航 在 网 页 中 是 必 不 可 少 的 部 分 ,从 视觉 角度 来 看 ， 
导航 可 分 为 纵向 导航 、 横 向 导航 和 异形 导航 。 

透 过 表象 看 本 质 , 导 航 可 以 归纳 为 一 个 列表 ,而 且 列 
表 项 之 间 并 无 先后 顺序 ,因此 设计 者 通常 采用 无 序列 表 
实现 导航 。 由 于 无 序列 表 本 身 就 是 纵向 排列 的 ,因此 仅 


关 一 起 吃苦 的 幸福 


图 5-35 列表 的 图 像 修 饰 符 
预览 效果 


需 少许 改造 即 可 实现 精美 的 列表 模式 纵向 导航 。 本 节 以 制作 实例 的 方式 讲解 纵向 导航 的 


实现 。 
【案例 5-10】 纵向 导航 。 


@ 启动 Dreamweaver CS6 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 ,将 所 用 素 


材 复 制 到 该 文件 夹 中 。 


@ 新 建 HTML 5 文档 ,创建 一 个 名 为 page_nav 的 nav 容器 ,并 在 其 中 创建 一 组 无 序 


列表 ,如 图 5-36 所 示 。 


在 此 页 面 结 构 中 ,所 有 文字 均 被 1i 标签 所 包 右 ,由 于 这 些 文字 都 是 超 链接 所 以 又 被 a 
标签 所 包 囊 , 为 了 呈现 “我 的 首页 "文字 链接 与 其 他 导航 的 区 别 之 处 ,这 里 拟定 义 current 


类 规则 来 单独 解决 这 个 问题 。 


在 未 添加 任何 CSS 规则 的 情况 下 ,预览 效果 如 图 5-37 所 示 。 
@ 在 本 页 面 项 部 的 head 区 域内 ,编写 对 应 的 CSS 样式 ,如 图 5-38 所 示 。 
@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-39 所 示 。 


~ 
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[5sayy 
<nav id="page_nav"> 
<ul> 
<1li><a href="#" class="current"> 我 的 首页 </a></1i>| 
<1li><a href="#"> 今 日 焦点 </a></1i> 
<1i><a href="#"> 用 车 服务 </a></1i> 
<1li><a href="#"> 自 驾 精 选 c/a></1i> 
<li><a href="#"> 汽 车 视频 </a></1i> 


<li><a href="#"> 试 驾 评 惠 </a></1i> 
</ul> 
</nav> 
</body> 
图 5-36 案例 5-10 的 页 面 结构 图 5-37 案例 5-10 的 当前 预览 效果 


<style type="text/css"> 
#page nav { 

width: 130px; 

border: 1px solid #cccccc; 

padding: 3px; 

font: 12px/18px Arial, sans-serif; 
) 
#page nav * { 

margin: 0; 

padding: 0; 
) 
#page nav 1i { 

list-style: none; 

border-boccom: 1px solid #ffce88;/* 设 置 列表 项 之 间 的 间隔 线 */| 
) 
#page nav 11 aa { 

display: block; 

background: #fbd346 url (menu_bg.jpg) repeac-Y left; 

color: #000; 

et none;/* 取 消 超 树 接 文字 下 划 线 效果 */ 

Iding: 5px 5px 10px 15px;/* 设 置 内 边 距 ， 目的 是 将 a 元 素 

Me 定 的 空间 ， 用 于 显示 背景 图 像 */ 


J nav 1i a:hover { 
background: #£7941d url (menu h.jpg) repeat-x top; 

)》 

#page_nav 1i a.current, #page nav 1i a:hover.current { 
background: #£7941d url(current.jpg) repeac-x top; 


</style> 


图 5-38 案例 5-10 的 CSS 规则 图 5-39 纵向 导航 预览 效果 


这 里 需要 注意 的 是 ,CSS 样式 规则 中 通过 无 序列 表 将 导航 整合 起 来 ,再 使 用 
background 属性 多 次 引用 不 同 的 图 像 呈 现 出 多 样 的 效果 。 

伪 元 素 a:hover 在 CSS 样式 中 的 含义 是 超 链接 鼠标 悬 停 时 的 状态 ,通过 改变 其 中 的 
背景 图 像 ,实现 鼠标 悬 停 在 文字 链接 时 背景 交替 变化 的 效果 。 


5.3.4 横向 导航 


5. 3. 3 小 节 已 经 讲述 了 纵向 列表 导航 的 实现 方法 ,如 果 想 要 让 列表 横向 排列 ,float 属 
性 起 到 了 至 关 重 要 的 作用 ,这 也 是 横向 导航 实现 的 核心 所 在 。 下 面 通过 实例 来 讲述 横向 
导航 的 实现 方法 ,请 读者 仔细 体会 float 属性 所 起 的 作用 。 

【案例 5-11】 横向 导航 。 

@ 启动 Dreamweaver CS6, 创 建新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 , 将 所 用 素 
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材 复制 到 该 文件 夹 中 。 

@ 新 建 HTML 5 文档 ,创建 一 个 名 为 nav 的 DIV 容器 ,并 在 其 中 创建 一 组 无 序列 
表 , 如 图 5-40 所 示 。 在 未 添加 任何 CSS 规则 的 情况 下 ,预览 效果 如 图 5-41 所 示 。 

@ 为 了 让 列表 横向 排列 ,这 里 需要 对 列表 设置 浮动 效果 ,在 本 页 面 顶 部 的 head 区 域 
内 ,编写 对 应 的 CSS 样式 ,如 图 5-42 所 示 。 


style EBPe=wEeXE75539y 
sh 


border: 


{background: #f5f0e0 url(images/noise.png);} 

iner { 

height: 800px; 

background: url (images/bg.jpg) center top no-repeat; 


lal#nav { 
width: 700px; 
margin: 0 aucor 


Rpoays text-align: center; 
[are 4m Bantnindiny overflow: hidden; 
<ul id="nav"> " 
<1i><a href="#"> 我 的 首页 </a></11i> 
<1li><a href="#"> 关 于 我 们 c/a></11i>| 
<li><a href="#"> 我 的 工作 </a></11> 
<li><a href="#"> 联 系 我 们 c/a></11>| 


bl#nav 1i { 
float: left;/* 设 置 列表 浮动 效果 ， 其 目的 是 让 列表 横向 排列 */ 


list-style: none; 


lol#nav 11 a 1 
display: block; 
width: 97px; 
height: 77px; 
Padding: 72px 0 0 0; 
margin: 0 32px 0 32px; 
font: 18px "微软 雅 黑 "; 
color: #9c5959; 
text-shadow:; 0 1px 3px #c4bda6;/* 设 置 字体 阴影 效果 */ 
text-decoration: none; 
background: url(images/label.png) 0 -149px no-repeat; 


ail#nav 1i a:hover { 
background: url(images/label.png) 0 0 no-repeat; 
color: #eeegd9; 
text-shadow: 0 2px 3px #4c2222:/* 设 置 字体 阴影 效果 */ 


lai#nav 11 a. 


background: url (images/label.png) 0 -149px no-repeat; 


/style> 


5-41 案例 5-11 的 当前 预览 效果 图 5-42 案例 5-11 的 CSS 规则 


@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-43 所 示 。 


5-43 ”横向 导航 预览 效果 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


需要 特别 注意 的 是 ,在 CSS 样式 规则 中 ,1 元素 除了 有 盛 放 列表 项 内 容 的 作用 外 ,由 
于 应 用 了 float 属性 ,所 以 变 为 横向 排列 。 此 外 ,为 了 使 鼠标 悬 停 效果 更 加 动感 ,还 增加 了 
JavaScript 脚本 ,具体 内 容 请 查阅 源 文 件 , 这 里 不 再 袭 述 。 
5.3.5 图 文 信息 列表 


图 文 信息 列表 的 应 用 无 处 不 在 ,例如 天 猫 .淘宝 网 和 京东 网 等 诸多 门户 网 站 ,其 中 用 
于 显示 产品 的 列表 都 是 图 文 信息 列表 ,如 图 5-44 所 示 。 


¥29.90 8475 元 500g 
【百草 味 】 坚 果 地 食 干果 奶油 味 夏威夷 
百草 味 旗舰 店 百草 味 这 舰 店 


月 成 交 65.0 万 笔 计价 64 万 @@ 月 成 交 2.0 万 笔 评 价 47 万 才 


图 5-44 图 文 信息 列表 


图 文 信息 列表 就 是 将 列表 内 容 以 图 像 的 形式 在 页 面 中 体现 ,可 以 简单 地 理解 为 图 片 
列表 附带 简短 的 文字 说 明 。 下 面 以 制作 实例 的 形式 讲解 图 文 信息 列表 的 实现 。 

【案例 5-12】 图 文 信息 列表 。 

@ 启动 Dreamweaver CS6 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 ,将 所 用 素 
材 复 制 到 该 文件 夹 中 。 

@ 新 建 HTML 5 文档 ,在 其 中 创建 名 为 box 的 DIV 容器 ,并 在 其 内 部 创建 一 组 无 序 
列表 ,如 图 5-45 所 示 。 


图 5-45 案例 5-12 的 页 面 结构 


从 页 面 结 构 可 以 分 析出 ,box 容器 用 于 盛 放 所 有 元 素 ;无 序列 表 将 图 像 信息 和 文字 信 
息 组 合 在 一 起 ;img 标签 用 于 盛 放 产 品 的 图 像 ; 一 strong 二 标签 用 于 盛 放 产 品 对 应 的 文 
字 ; 志 span 之 标签 和 所 em 之 标签 用 于 显示 产品 打折 前 后 的 价格 信息 。 需 要 提醒 读者 的 
是 ,在 实际 工作 中 需要 根据 具体 情况 ,增加 或 删除 某 些 标签 来 完善 相应 的 功能 ,并 非 图 文 
信息 列表 必须 有 上 述 的 几 种 标签 。 

@ 在 没有 CSS 样式 美化 的 情况 下 ,图 片 和 说 明文 字 均 以 列表 模式 显示 ,通过 浏览 器 
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解析 后 的 效果 如 图 5-46 所 示 。 


@ 在 本 页 面 顶 部 的 head 区 域内 ,编写 初始 化 的 CSS 样式 ,如 图 5-47 所 示 。 

@ 为 了 列表 能 够 横向 排列 ,这 里 使 用 “float:left;” 实 现 这 种 效果 ,并 且 增 加 外 边 距 以 
美化 显示 效果 。 此 时 ,由 于 设置 了 浮动 属性 ,并 且 又 增加 了 外 边 距 ,IE 6 可 能 会 产生 双 倍 
间距 的 bug, 所 以 再 增加 “display:inline;” 规 则 以 解决 该 问题 ,具体 的 样式 代码 如 图 5-48 
所 示 。 保 存 当前 文件 ,通过 浏览 器 预览 可 以 看 到 当前 效果 ,如 图 5-49 所 示 。 


style type="text/css"> 


padding: 0; 
border: 0; 
}V* 清 除 本 页 面 所 用 元 素 的 默认 属性 */ 
#box { 
width: 450px; 
height: 350px; 
margin: 0 auto; 
font-size: 12px; 
padding: 10px 0 0 25px; 
border: 2px solid #ccc; 


a 图 5-47 初始 化 的 CSS 样式 规则 


Dr 
width: 120px; 
floac: lefc;/* 设 置 列表 项 浮动 ， 使 其 横向 排列 */ 
margin: 0 25px 12px 0;/* 设 置 列表 项 的 外 边 距 */ 
list-style:; none;/* 靖 除 列表 默认 风格 */ 
display: inline;/* 为 避免 TE6 产 生 双 们 间距 的 bug， 增 加 该 规则 */ 


图 5-46 未 经 CSS 样式 美化 的 预览 效果 图 5-48 ul 标签 下 i 标签 的 样式 规则 


i 小 请 回电， 
| 
i 


¥41.0 y990 


5-49 ”初步 美化 后 的 预览 效果 


区 
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@ 为 了 使 页 面 更 加 美观 ,还 需要 继续 添加 CSS 样式 规则 。 这 里 将 超 链接 a 元 素 块 状 
化 ,使 其 具有 宽 高 属性 ,并 且 清除 超 链 接 下 划 线 效果 ;将 strong 元 素 也 块 状 化 ,改变 其 颜 
色 ; 将 span 元 素 和 em 元 素 附加 不 同 的 颜色 ,并 将 em 元 素 内 的 文字 增加 删除 线 效果 。 更 
为 具体 的 规则 如 图 5-50 所 示 。 


ul ii ai 
display: block; 
text-decoration: none;/* 青 除 超 链接 下 划 线 效果 */ 
text-align: center;/* 设 置 居 中 显示 */ 


nl 1i a strong { 
display: block; 
width: 120px; 
line-height: 20px;/* 设 置 行 高 ,控制 文 字 番 直 距 离 */ 
font-weight : normal;/* 设 置 字体 重 里 为 普通 */ 
color: #333; 


ul 1ia span { 
display: block; 
width; 120px; 
line-height: 20px; 
color: #F60; 


bl li a span em { 
font-style: normal; 
Color: #666; 
text-decoration: line-through;/* 设 置 障 除 线 效果 */ 


</style> 


图 5-50 更 丰富 的 CSS 样式 规则 


@ 保存 当前 文件 ,通过 浏览 器 预览 可 以 看 到 当前 效果 ,如 图 5-51 所 示 。 


上 本文 信息 列表 
EG 


: | 


ee a 小 和 ee 


a 其 人 EO 


图 5-51 案例 5-12 的 最 终 预览 效果 


总 的 来 说 ,图 文 信息 列表 主要 使 用 的 是 无 序列 表 和 浮动 效果 来 完成 的 ,其 整体 结构 也 
是 根据 实际 需要 添加 或 删 减 部 分 结构 标签 配合 具体 功能 而 定 的 。 读 者 可 以 改变 其 中 的 部 
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分 结构 ,自行 编写 CSS 样式 规则 完善 或 改变 网 站 的 具体 功能 ,这 里 不 再 袭 述 。 


5.4 过程 指导 一 一 “五 月 美食 节 专 场 ” 网 页 的 设计 与 制作 


本 节 主 要 运用 无 序列 表 、CSS 浮动 、 相 对 定位 和 绝对 定位 的 基本 知识 ,完成 “五 月 美 
食 节 专 场 " 网 页 的 设计 与 制作 。 通 过 本 节 的 练习 ,读者 能 够 充分 掌握 CSS 定位 在 实际 工 
作 中 的 应 用 。 


5.4.1 过 程 分 析 


通过 对 实际 任务 的 理解 ,本 节 需 要 完成 的 页 面 最 终 效果 如 图 5-52 所 示 , 从 页 面 整个 
布局 来 看 ,主体 内 容 拟 采用 无 序列 表 盛 放 产品 信息 ,而 无 序列 表 本 身 拟 采用 相对 定位 和 绝 
对 定位 混合 使 用 的 方式 实现 页 面 布局 。 通 过 深思 熟 虑 ,页 面 布局 如 图 5-53 所 示 。 


eee 
图 5-52 最终 效果 图 


5.4.2 步骤 详解 


1. 前 期 准备 工作 

(1) 启动 Dreamweaver CS6 ,完成 创建 站 点 的 过 程 。 在 站 点 中 创建 images 和 style 
两 个 文件 夹 , 分 别 存放 页 面 修饰 图 片 和 CSS 样式 文件 。 

(2) 创建 HTML 5 空白 文档 ,并 命名 为 index. html。 创 建 一 个 外 部 CSS 样式 表 文 
件 , 将 这 个 CSS 文件 保存 在 站 点 的 style 文件 夹 下 ,并 命名 为 style. css。 

(3) 在 Dreamweaver CS6 的 “CSS 样式 ”面板 中 , 单 击 “ 附 加 样式 表 ” 按 钮 疾 , 弹 出 “ 链 
接 外 部 样式 表 ” 对 话 框 ,将 之 前 创建 的 style. css 外 部 样式 文件 链接 到 index. html 页 面 。 
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wrapper 
container 
header 
top 
main 
box_01 
li li li li li 
top 
main 
box_02 
下 下 下 下 
top 
main 
box_03 
li li li li li 
footer 


图 5-53 “五 月 美食 节 专 场 ”网 页 的 布局 示意 图 


2. 头 部 区 域 的 制作 

(1) 将 光标 定位 在 设计 视图 的 页 面 中 。 在 插入 面板 的 “常用 "类别 中 , 单 击 * 插 入 Div 
标签 ”按钮 。 

(2) 此 时 在 弹出 的 对 话 框 的 “插入 ”下拉 菜 单 中 选择 “在 搬入 点 ?选项 ,在 ID 中 输入 
wrapper, 单 击 “ 确 定 ” 按 钮 , 即 可 创建 wrapper 容器 。 

(3) 切换 到 style. css 文件 中 ,创建 系列 初始 化 规则 ,如 图 5-54 所 示 。 

(4) 在 名 为 wrapper 的 DIV 容器 内 部 ,创建 相互 嵌 套 的 container 容器 和 header 容 
器 ,此 时 页 面 结构 如 图 5-55 所 示 。 这 里 wrapper 容器 用 于 对 整个 页 面 进行 总 体 控制 ， 
container 容器 用 于 实现 宽屏 两 侧 图 像 的 显示 ,header 容器 用 于 盛 放 页 面 头 部 的 宣传 
图 像 。 

(5) 在 header 容器 内 部 插入 预先 制作 完成 的 宣传 图 像 ,并 在 style. css 文件 中 针对 
container 容器 编写 规则 ,如 图 5-56 所 示 。 最 后 ,通过 浏览 器 预览 后 的 效果 如 图 5-57 
所 示 。 
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加 
margin: 0; 
padding: 0; 
border: 0; 


-clear { 
clear: boch: 


body { 
background: #96E6F1; 
color: #000; 


} <body> 
#wrapper { <div id="wrapper"> #container { 
background: <div id="container"> height: auto; 
url(../images/header-bg-01.jpg) <div id="header"></div>| margin: 0 auto; 
no-repeat center top; </div> padding: 0; 
height: auto; </div> width: 980px; 
</body> 
5-54 页 面 初始 化 CSS 规则 图 5-55 ”初始 页 面 结构 图 5-56 ”container 容器 
的 CSS 规则 


所 进口 民 生 7 号 术 油水 免 单 各 jn 站 本 


图 5-57 页 面 头 部 区 域 预览 效果 


3. 主体 区 域 的 制作 

(1) 在 设计 视图 中 ,在 插入 面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 "按钮 ,弹出 
“插入 Div 标签 ”对 话 框 。 在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 的 下 拉 
菜单 中 选择 二 div id= "header" 二 。 在 ID 中 输入 “top”, 单 击 “ 确 定 ” 按 钮 , 即 可 在 header 
容器 后 面 插入 top 容器 。 

(2) 使 用 同样 的 方法 ,在 top 容器 后 面 插入 main 容器 。 

(3) 切换 到 style. css 文件 中 ,为 top 容器 和 main 容器 创建 CSS 规则 ,如 图 5-58 所 示 。 


ET 
background: url(../images/pro-bg.jpg) no-repeat; 
height: 62px; 
margin: Spx 0 Spx; 


#main { 
width: 960px; 
margin:; 10px auto; 
background: #5BA4C7; 
padding: 10px 0 10px 20px; 


图 5-58 top 容器 与 main 容器 的 CSS 规则 


~、 
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(4) 根据 布局 示意 图 的 规划 ,在 main 容器 内 部 创建 box_01 容器 ,并 在 box_01 容 
器 内 部 创建 一 组 无 序列 表 , 并 在 每 个 列表 项 内 部 创建 标题 和 段落 ,具体 结构 如 
图 5-59 所 示 。 


[div id="wrapper™> 
<div id="container"> 
<div id="header"> 长 img sz </div> 
<div id="top"></div> 
<div id="mainn> 
<div id="box 01"> 
<ul id="pro" class="ul-style"> 
<li><img sarc ges/01.jpg" width="160" height="160"> 
<h3><a nre: > 美国 进口 风味 扁桃 仁 </a></h3> 
<P> 售 价 : &yen; <em>199 </em><span> 活 动 价 : &yen; 149</span></P> 
<div class="newview"></div> 
</1i> 
<li><img src="images/02.jpg" width="160" height="160"> 
<h3><a href=" 才 "> 日 本 进口 巧克力 夹心 薄 胸 饼 </a></h3> 
<P> 售 价 : &yen; <em>200 </em><span> 活 动 价 : &yen; 150</span></P> 
<div class="newview"></div> 
</1i> 
<li><img src="images/03.jpg" width="160" height="160"> 
<h3><a href="#"> 泰 国 进口 香 腾 毒 米 片 </a></h3> 
<P> 售 价 : &yen; <em>240 </em><span> 活 动 价 : &yen; 190</span></P> 
<div class="newview"></div> 
</1i> 
<1li><img src="images/01.jpg" width="160" height="160"> 
<h3><a href="#"> 美 国 进口 风味 扁桃 仁 </a></h3> 
<P> 售 价 : &yen; <em>199 </em><span> 活 动 价 : &yen; 149</span></P> 
<div class="newview"></div> 
</1i> 
<li><cimg src="images/02.ipg" width="160" height="160"> 
<h3><a href=" 才 "> 日 本 进口 巧克力 来 心 薄 胸 饼 </a></h3> 
<P> 售 价 : &yen; <em>200 </em><span> 活 动 价 : &yen; 150</span></P> 
<div class="newview"></div> 
</1i> 
</ul> 
<div class="clear"></div> 
</div> 
</div> 
</div> 
/aiv> 


图 5-59 box_01 容器 的 结构 代码 


需要 特别 指出 的 是 ,页 面 结构 中 二 div class 一 "newview" 二 一 /div 之 容器 拟 盛 放 产品 
左上 和 角 的 新 品 标志 ,该 标志 采用 相对 定位 的 方式 将 图 像 定 位 于 左上 和 角 ,起 到 美化 作用 。 

(5) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 5-60 和 图 5-61 所 示 。 通 过 浏 
览 器 预览 后 的 效果 如 图 5-62 所 示 。 

(6) 根据 布局 规划 ,参照 步骤 (1) 一 (4) 的 方法 ,增加 相同 的 结构 内 容 , 即 可 完成 主体 
的 制作 。 


4. footer 区 域 的 制作 

(1) 在 container 容器 后 面 插入 footer 容器 ,输入 网 站 的 版 权 内 容 。 返 回 style. css 文 
档 , 创 建 相关 CSS 规则 ,如 图 5-63 所 示 。 

(2) 保存 当前 页 面 文档 ,通过 浏览 器 预览 最 终 完 成 本 页 面 的 制作 。 
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style IPT 
width: 100%; 
text-align: center; 
color: #333; 
font-weight: bold; 
margin-top: Spx; 
font-size: 12px; 


-ul-atyle { 
list-style: none; 
} 
.al-style 1i{ 
float: left; 
background: #FFF; 
margin: Opx 32px Opx Opx; 
width: 160px; 
position: relative; 


.ul- 


yle lipemt 
text-decoration: 

line-through; 

.ul-style li p span { 
color: #900; 


} 

.ul-style li h3 { 
width: 100%; 
overflow: hidden; 


Text-align: center; newview { 
padding: 4px 0 0 0; background: 
margin-top: Spx; url(. ./images/icon-new.gif) 


} no-repeat left top; 
height: 23px; 
width: 33px; 
position: absolute; 
top: 0; 
lefc: 0; 


ul-style li hb3 a 
font-weight: normal; 
color: #666; 
text-decoration: none; 
font-size: 12px; 


图 5-60 ”图 文 列表 CSS 规 则 (1) 图 5-61 图 文 列表 CSS 规则 (2) 


VINYU YY7Y7 7Y7YY 


进口 食品 专场 


进口 食品 满 129 元 减 20 元 
蔽 动 时 间 : 5.5-5.17 


background: #5BA4C7; 
height: 48px; 
margin-top: 20px; 
font-size: 12px; 
color: #FF! 
padding-top: 15px: 
text-align: center; 


图 5-63 footer 容器 的 CSS 规则 
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5.5 自主 任务 一 一 “手机 专卖 网 ”的 制作 


参照 本 章 所 讲 的 内 容 , 制 作 * 手 机 专卖 网 ”的 主页 ,在 制作 过 程 中 注意 体会 相对 定位 和 
绝对 定位 的 应 用 。 页 面 最 终 效 果 和 布局 如 图 5-64 和 图 5-65 所 示 。 


5-64 ”最终 预览 效果 图 


wrapper 


top 


header 


content 


box 3 box 4 


footer 


5-65 “手机 专卖 网 ”主页 的 布局 示意 图 
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5.6 习题 


. 列表 有 几 种 类 型 ? 简 述 其 在 网 页 中 有 哪些 应 用 。 

. 纵向 的 列表 导航 转变 为 横向 的 导航 ,其 本 质 是 什么 ? 

. 在 页 面 中 创建 多 个 DIV 容器 ,使 用 相对 定位 的 知识 制作 图 5-66 所 示 的 布局 。 

. 应 用 本 章 知识 ,制作 图 5-67 所 示 的 页 面 ,要 求 制作 过 程 中 认真 体会 图 文 信息 列表 
的 制作 方法 。 


人 


图 5-66 习题 3 预览 效果 


TEA & MEAL 


TASTE THE WEST MEAL WTTH TIE BEST TEA. 


5-67 习题 4 预览 效果 
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表格 与 表单 


【本 章 导读 】 

随 着 CSS 的 发 展 ,表格 布局 时 代 已 经 结束 ,表格 的 用 途 回归 到 存放 各 类 数据 信息 上 
来 ;表单 能 够 帮助 Web 站 点 获取 访问 者 的 信息 , 它 是 人 机 交互 必 不 可 少 的 元 素 。 本 章 围 
绕 表 格 与 表单 两 类 元 素 , 着 重 讲解 它们 在 Dreamweaver 中 的 操作 方法 ,以 及 如 何 使 用 
CSS 灵活 控制 .美化 这 两 类 元 素 。 

【学 习 目标 】 

避 掌握 插入 表格 ,编辑 表格 的 基本 操作 ; 

局 掌握 常见 表单 对 象 的 使 用 方法 ; 

避 认 知 并 掌握 CSS 控制 .美化 表格 和 表单 的 方法 。 


6.1 表格 的 创建 与 编辑 


当 页 面 中 包含 便于 罗列 的 多 组 数据 时 ,使 用 表格 元 素 进行 显示 是 非常 不 错 的 选择 。 
而 使 用 默认 设置 创建 的 表格 在 美观 方面 不 能 令 人 满意 ,这 时 通常 使 用 CSS 规则 对 其 进行 
控制 。 


6.1.1 创建 表格 


Dreamweaver CS6 提供 多 种 创建 表格 的 方法 ,下 面 介绍 如 何 创 建 表格 。 

【案例 6-1】 创建 表格 。 

@ 启动 Dreamweaver CS6, 新 建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 表格 的 
位 置 。 

@ 按 Ctrl 十 Alt 十 工 键 ,或 者 在 菜单 栏 中 执行 “插入 ”表格 ?命令 ,或 者 在 插 人 面板 
“常用 ”类 别 中 , 单 击 国 按钮 

@ 这 时 弹出 如 图 6-1 所 示 的 对 话 框 。 在 该 对 话 框 中 ,主要 参数 含义 如 下 。 

芯 行 数 : 指 的 是 拟 创建 表格 中 行 的 数目 。 

冬 列 数 : 指 的 是 拟 创建 表格 中 列 的 数目 。 

避 表格 宽度 ; 以 像素 为 单位 或 按 占 浏览 器 窗口 宽度 的 百分比 指定 表格 的 宽度 。 

芯 边 框 粗细 : 以 像素 为 单位 ,设置 表格 边框 的 宽度 。 若 设置 为 0, 则 在 浏览 时 不 显示 
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表格 边框 。 

避 单 元 格 边 距 : 确定 单元 格 边框 与 单元 格 内 容 之 间 的 像素 数 。 

气 单 元 格 间距 : 相 邻 的 表格 单元 格 之 间 的 像素 数 。 

名 无 : 对 表格 不 启用 列 或 行 标题 。 

避 左 : 将 表格 的 第 一 列 作为 标题 列 。 

避 顶部 : 将 表格 的 第 一 行 作为 标题 行 。 

避 两 者 : 能 使 用 户 在 表格 中 输入 列 标题 和 行 标题 。 

避 标 题 ; 显示 在 表格 外 的 表格 标题 。 

名 摘要 : 表格 的 说 明 信 息 。 

@ 根据 需要 设置 相关 信息 ,最 后 单 击 “ 确 定 ” 按 钮 , 即 可 插入 一 组 表格 。 

@ 将 光标 定位 在 某 个 单元 格 中 ,直接 输入 文字 ,. 即 可 在 表格 中 插入 文字 ;直接 插入 图 
像 , 即 可 完成 图 像 的 插入 ;再 次 执行 “插入 ”表格 ”命令 ,可 以 在 表格 内 嵌 套 另 一 表格 , 预 
览 后 效果 如 图 6-2 所 示 。 


证 创建 表格 
《ea >QCGIQa 三 


表格 中 可 以 括 入 文字 | 天 本 中 可以 恬 入 | 表 往 中 可以 


填 接 输入 文字 ， 即 可 完 
| 成 添加 


图 6-1 “表格 "对话 框 图 6-2 创建 表格 


6.1.2 单元 格 属性 设置 


表格 中 行 与 列 交 叉 的 部 分 称 为 单元 格 , 它 是 组 成 表格 的 最 小 单位 ,单个 数据 的 输入 和 
修改 都 是 在 单元 格 中 进行 的 。 将 光标 定位 在 某 个 单元 格 中 ,属性 面板 即刻 显示 有 关 单元 
格 的 相关 属性 ,如 图 6-3 所 示 ,其 中 各 项 含义 如 下 。 


《> mmL| | 格式 @) [无 四 类 无 - BI 二 二 二 二 村 四. |) 
也 css i 元 ~ 匀 接 中 = 国生 四 | 

| 园 we 水 下 加 区。 -| 区 加 | 不 换行 轴 器 东 县 策 @G) [J] | 
一 口头 二 中 避 -高 如 标 是 四) 口 


图 6-3 设置 单元 格 属 性 
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芯 水 平 : 用 于 设置 单元 格 内 容 的 水 平 对 齐 方式 ,包含 默认 、 左 对 齐 、 右 对 齐 和 居中 对 
齐 4 种 选项 。 

所 垂直 : 用 于 设置 单元 格 内 容 的 垂直 对 齐 方式 ,包含 默认 、 顶 端 .居中 、 底 部 和 基线 
5 种 选项 。 

名 宽 和 高 : 以 像素 为 单位 或 按 整个 表格 宽度 或 高 度 的 百分比 为 单位 ,计算 所 选单 元 
格 的 宽度 和 高 度 。 

所 不 换行 : 勾 选 该 复 选 框 , 则 单元 格 中 的 所 有 文本 都 在 一 行 上 。 对 于 超出 宽度 的 内 
容 , 单 元 格 会 自动 加 宽 来 容纳 所 有 数据 。 

所 标题 : 勾 选 该 复 选 框 , 则 将 所 选 的 单元 格格 式 设置 为 表格 标题 单元 格 。 默 认 情 况 
下 ,表格 标题 单元 格 的 内 容 为 粗 体 并 且 居 中 。 

名 背景 颜色 : 用 于 设置 单元 格 的 背景 颜色 。 

名 页面 属 性 : 单 击 该 按钮 ,可 以 打开 * 页 面 属性 ?对 话 框 , 对 页 面 属性 进行 相关 设置 。 

气 加 按钮 : 单 击 该 按钮 ,可 将 所 选 的 单元 格 、 行 或 列 合并 为 一 个 单元 格 。 当 选择 的 
单元 格 形成 矩形 或 直线 的 块 时 此 按钮 才 被 激活 。 

气 国 按钮 : 单 击 该 按钮 ,可 将 一 个 单元 格 分 成 两 个 或 多 个 单元 格 。 当 选择 的 单元 格 
多 于 一 个 时 , 则 此 按钮 将 禁用 。 


6.1.3 单元 格 基本 操作 


1. 选择 单元 格 

【案例 6-2】 选择 单元 格 。 

g@ 启动 Dreamweaver CS6 ,新建 空白 HTML 5 文档 ,插入 一 组 5 行 5 列 的 表格 。 

@ 将 光标 定位 在 某 个 单元 格 内 , 拖 动 鼠标 , 即 可 选中 一 个 或 多 个 连续 的 单元 格 。 此 
外 ,在 选择 过 程 中 按 下 Ctrl 键 可 以 选择 多 个 不 连续 的 单元 格 ; 按 下 Shift 键 可 以 选择 矩形 
区 域内 的 所 有 单元 格 。 

@ 将 光标 定位 在 表格 的 上 边缘 或 左边 缘 , 当 鼠 标 指 针 变 为 箭头 时 , 单 击 即 可 选择 一 


整 列 或 一 整 行 ,如 图 6-4 所 示 。 
-一 


图 6-4 定位 光标 在 表格 边缘 即 可 选择 列 或 行 


@ 若 要 选择 整个 表格 ,只 须 将 光标 移动 到 表格 的 上 下 边框 ,或 表格 的 四 个 顶 角 , 当 光 
标 变 成 表格 网 格 图 标 舌 时 , 单 击 即 可 选择 整个 表格 ,如 图 6-5 所 示 。 


2. 删除 单元 格 
选择 完整 的 一 行 或 列 ,然后 在 菜单 栏 中 执行 “编辑 ”清除 ?命令 ,或 者 直接 按 Delete 
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tome ts | 


图 6-5 选择 整个 表格 


键 即 可 删除 完整 的 一 行 或 列 。 


3. 合并 与 拆 分 单元 格 

【案例 6-3】 合并 与 拆 分 单元 格 。 

@ 启动 Dreamweaver CS6 ,新建 空白 HTML 5 文档 ,插入 一 组 2 行 2 列 的 表格 ,并 在 
其 中 插入 多 幅 图 像 。 

@ 选择 多 个 连续 的 单元 格 , 右 击 ,在 右键 菜单 中 选择 “表格 ”>“ 合 并 表格 "命令 ,或 者 
在 属性 面板 中 单 击 辆 按钮 , 即 可 将 多 个 单元 格 合并 为 一 个 ， 

如 图 6-6 所 示 。 合 并 后 的 单元 格 内 容 将 重新 置 于 新 的 单元 2 
格 中 。 

@ 在 表格 中 选择 一 个 待 拆 分 的 单元 格 , 然 后 在 菜单 中 Sm 
执行 “修改 “表格 ”>“ 拆 分 表格 "命令 。 或 者 在 属性 面板 一 
中 单 击 诅 按钮 ,也 可 以 右 击 , 在 右键 菜单 中 执行 “表格 ”一 yo 
“ 拆 分 单元 格 "命令 。 

@ 这 时 弹出 如 图 6-7 所 示 的 对 话 框 。 根 据 实 际 需要 ,选择 如 何 拆 分 单元 格 ,设置 完 
成 后 单 击 “ 确 定 ” 按 钮 即 可 ,如 图 6-8 所 示 的 是 将 单元 格 拆 分 为 1 行 2 列 的 单元 格 。 


图 6-6 合并 单元 格 


把 单元 格 拆 分 回 行 @) 
@ 后 EE 


璐 @:2 图 


图 6-7 “ 拆 分 单元 格 ” 对 话 框 图 6-8 拆 分 单元 格 后 的 效果 


4. 增加 行 或 列 

【案例 6-4】 增加 行 或 列 。 

Q 将 光标 定位 在 要 添加 行 ( 列 ) 单 元 格 的 内 部 , 右 击 ,在 右键 菜单 中 选择 “表格 ”>“ 插 
和 信行 或 列 ” 命 令 。 

加 这 时 弹出 如 图 6-9 所 示 的 对 话 框 。 根 据 实际 需要 ,设置 增加 的 行 数 或 列 数 ,以 及 
新 增 列 或 行 的 位 置 。 设 置 完成 后 单 击 “ 确 定 ” 按 钮 , 即 可 新 增 一 列 或 一 行 。 图 6-10 所 示 的 
是 在 表格 中 增加 行 的 效果 。 
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图 6-9 “插入 行 或 列 " 对 话 框 图 6-10 ”增加 行 的 效果 


6.2 “CSS 在 表格 中 的 应 用 


使 用 Dreamweaver CS6 插入 表格 十 分 简单 ,但 是 表格 的 默认 外 观 一 般 不 能 满足 工作 
中 的 需要 ,这 就 需要 设计 师 使 用 CSS 的 相关 规则 对 表格 进行 美化 。 


6.2.1 使 用 border-collapse 属性 制作 细 线 表格 


默认 状态 下 ,即便 在 Dreamweaver CS6 中 设置 表格 边框 的 粗细 为 1 像素 大 小 ,预览 
后 的 效果 也 无 法 令 人 满意 。CSS 中 提供 了 可 以 解决 该 问题 的 属性 一 一 border-collapse。 

所 谓 “ 细 线 ”, 指 的 是 表格 在 浏览 器 中 显示 的 所 有 边框 宽度 均 只 有 1 个 像素 。 为 了 更 
加 清晰 地 讲授 知识 ,这 里 以 实例 加 以 体现 。 

【案例 6-5】 细 线 表格 。 

@ 启动 Dreamweaver CS6 ,新 建 空白 HTML 5 文档 ,在 插入 面板 的 “常用 ”类 别 中 ， 
单 击 “表格 ”按钮 ,这 时 弹出 “表格 ?对 话 框 。 

@ 根据 实际 需要 在 “表格 ”对话 框 中 进行 设置 ,如 图 6-11 所 示 , 单 击 “ 确 定 ” 按 钮 , 创 
建 4 行 2 列表 格 。 

@ 在 表格 中 输入 相关 文字 内 容 , 通 过 浏览 器 预览 此 时 的 页 面 效 果 如 图 6-12 所 示 。 
从 图 中 可 以 看 出 ,此 时 表格 的 外 观 还 需要 进一步 改进 。 


表格 大 小 
行 数 4 列 数 : 2 
雪 格 宽度 : 400 | 你 素 ~ 


边框 丰 细 : 0 。 像素 
单元 格 边 距 - 本 
单元 格 间距 田 


轿 助 功能 
pd 使 用 border-collapse 属 性 制作 希 线 表格 人 
| 单元 格 A 单元 格 D 


单元 格 B 单元 格 E 
单元 格 C 单元 格 F 


ET EN 
图 6-11 创建 4 行 2 列 的 表格 图 6-12 表格 初始 预览 效果 
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@ 在 本 页 面 内 的 head 区 域内 部 插入 相关 CSS 样式 ,如 图 6-13 所 示 。 


|<scYle type="text/css"> 

table { 
border: 1px solid #000000; 
font: 14px/1.5em "微软 雅 黑 "; 


caprion { 
font-size: 20px; 
margin-bottom: 15px; 
text-align: center; 

) /* 设 置 表 头 文字 效果 */ 

th{ 
color: #F4F4F4; 
border: 1px soutd #000000; 
background 

) Ve* 区 边框 、 背 景色 ) */ 

ta { 
text-align: center; 
border: 1px solid #000000; 
background: 


于 FE 
} 7* . 闪 这 所 有 内容 单元 的 文字 居中 显示 ， 并 添加 黑色 边框 和 背景 颜色 */ 


</style> 


图 6-13 ” 细 线 表格 的 CSS 样式 代码 
@ 保存 当前 文件 后 ,通过 浏览 器 预览 后 的 效果 ,如 图 6-14 所 示 。 


使 用 border-collapse 属 性 制作 细 线 表格 
表格 标量 
单元 格 A 单元 格 D 
单元 格 B 单元 格 E 
单元 格 C 单元 格 F 


6-14 加 边框 后 的 预览 效果 


通过 观察 预览 效果 可 以 发 现 , 当 添加 border 边框 属性 后 ,每 个 单元 格 都 有 了 边框 ,而 
且 单 元 格 之 间 存 在 很 细 的 空白 间距 ,这 种 整体 效果 不 符合 实际 需求 。 如 何 来 解决 这 个 问 
题 呢 ? 

CSS 样式 中 border-collapse 属性 能 够 解决 这 个 问题 。 该 属性 的 主要 功能 就 是 设置 表 
格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 , 它 包含 separate 和 collapse 两 个 属性 值 ,使 用 前 
者 边框 会 被 分 开 ,使 用 后 者 边框 将 会 合并 。 

@ 在 CSS 样式 代码 的 table 类 型 选择 符 中 增加 border-collapse 属性 ,如 图 6-15 所 
示 。 通 过 浏览 器 预览 后 的 效果 ,如 图 6-16 所 示 。 


able 《 
border: 1px solid doonos: 


font: 14px/1.5em "微软 雅 黑 
border-collapse: collapse;/* 合 并 单元 格 之 间 的 边 * 
} 


6-15 ”增加 border-collapse 属性 


使 用 border-collapse 属 性 制作 细 线 表格 


表格 标题 表格 标题 
单元 格 A 单元 格 D 
单元 格 B 单元 格 E 
单元 格 C 单元 格 F 


图 6-16 ” 细 线 表格 最 终 预览 效果 


在 实际 工作 中 ,“border-collapse:collapse;” 属 性 可 以 认为 是 必 不 可 少 的 CSS 样式 代 
码 ,如 果 没 有 它 的 帮助 ,影响 的 将 是 整个 表格 的 视觉 效果 。 


6.2.2 使 用 伪 类 选择 器 制作 隔行 变色 表格 


隔行 变色 表格 在 实际 工作 中 非常 重要 ,因为 它 能 够 为 用 户 提供 可 以 参照 的 水 平 线 , 方 
便 访 问 者 浏览 数据 。 传 统 的 做 法 是 为 表格 的 行 添加 额外 的 odd 一 -ragam 一 | 
( 奇 ) 和 even( 偶 ) 类 规则 ,具体 的 结构 代码 如 图 6-17 所 示 。 Dd 


<td>énbsp;</td> 


随 着 HTML 5 的 推广 ,应 该 逐渐 避免 传统 做 法 中 那些 用 于 定 | 2 


<tr class="even"> 


义 外 观 的 类 名 。 下 面 介绍 CSS 3 中 新 的 选择 器 ,可 以 轻松 实现 上 ne od 


<cd>&nbsp;</rd> 


述 功能 而 不 改变 表格 结构 。 /er 
1. 利用 :nth-of-type 实现 隔行 换 色 Se 


:nth-of-type(n) 选 择 器 匹配 属于 父 元 素 的 特定 类 型 的 第 n 个 子 “| :sevenwy 
元 素 的 每 个 元 素 ,这 里 n 可 以 是 数字 、 关 键 词 或 公式 。odd 和 even 是 | eps 人 /> 
CSS 提供 的 可 用 于 匹配 奇数 或 偶数 的 子 元 素 的 关键 词 。 CE 
2. 利用 :nth-child 对 齐 文本 和 
表格 结构 代码 
在 默认 状态 下 ,表格 中 的 标题 为 居中 对 齐 ,而 表格 中 的 内 容 为 
左 对 齐 。 可 以 利用 : nth-child 来 增加 表格 中 文本 的 可 读 性 。 
:nth-child(n) 选 择 器 用 于 查找 某 元 素 的 子 元 素 ,这 里 n 可 以 是 数字 .关键 词 或 公式 。 
例如 选择 所 有 行 ,可 以 这 样 使 用 选择 器 table tr: nth-child(n); 如 果 想 选择 除 表 头 (第 一 
行 ) 之 外 的 所 有 行 , 可 以 这 样 使 用 选择 器 table tr:nth-child(n 十 2)。 


3. 具体 做 法 

隔行 变色 表格 的 目标 是 让 相 邻 两 行 表格 的 背景 颜色 显示 为 不 同 颜色 ,最 简单 的 做 法 
是 找到 表格 中 所 有 的 偶数 行 , 然 后 赋予 一 种 背景 色 。 同 样 的 ,也 可 以 找到 表格 中 所 有 奇数 
行 , 然 后 赋予 另 一 种 颜色 。 

【案例 6-6】 nth-of-type 示例 。 

@ 启动 Dreamweaver CS6 ,新建 空白 HTML 5 文档 ,插入 一 个 8 行 5 列 的 表格 ,并 输 
入 必要 的 文字 。 
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@ 在 本 页 面 内 的 head 区 域内 部 插入 相关 CSS 样式 ,如 图 6-18 所 示 。 
@ 保存 当前 文件 后 ,通过 浏览 器 预览 后 的 效果 ,如 图 6-19 所 示 。 


style type="text/css"> 
table { 
border-collapse; collapse; 


} 
td, rh{ 
border: 1px solid #000000; 
} 
tr:nth-of-type (leven) { 
background-color: #FCO; 
} 
tr:nth-of-type (odd) { 
background-color: #F90; 
) 
</style> 


6-18 ”实现 隔行 换 色 的 图 6-19 ”nth-of-type 预览 效果 
CSS 规则 


@ 在 图 6-19 中 , 除 表 头 (第 一 行 ) 以 外 的 所 有 文字 均 为 居 左 对 齐 , 这 里 想 要 改变 除 第 
一 行 以 外 的 所 有 行 的 文本 对 齐 方 式 , 需 要 添加 “tr:nth-child(n 十 2) {text-align: center;)” 
CSS 规则 。 保 存 当 前 文件 ,最 后 预览 效果 如 图 6-20 所 示 。 


图 6-20 利用 :nth-child 对 齐 文本 预览 效果 


6.3 表单 的 创建 与 编辑 


表单 是 网 页 元 素 中 非常 重要 的 元 素 之 一 ,也 是 网 站 是 否 具有 交互 功能 的 重要 体现 。 
表单 主要 负责 数据 采集 , 它 可 以 收集 用 户 的 信息 并 将 其 存储 在 服务 器 中 。 


6.3.1 表单 域 
1. 认识 表单 
表单 的 应 用 范围 非常 广泛 ,不仅 用 于 收集 信息 和 反馈 意见 ,还 广泛 用 于 资料 检索 、 网 


上 购物 等 多 种 交互 式 操作 。 一 般 来 说 ,表单 中 包含 文本 字段 、 密 码 字 段 . 单 选 按钮 、 复 选 
框 、 弹 出 菜单 .可 单 击 的 按钮 和 其 他 表单 对 象 .这 些 表单 对 象 主要 用 途 就 是 为 了 实现 浏览 
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者 与 Internet 服务 器 之 间 的 交互 ,图 6-21 
所 示 的 就 是 典型 的 表单 应 用 。 

总 的 来 说 ,表单 在 网 络 信息 交流 中 具 
有 重要 作用 ,而 在 Dreamweaver CS6 中 ， 
设计 者 可 以 采用 可 视 化 的 方法 创建 表单 对 
象 ,但 如 果 希 望 完成 表单 的 功能 ,还 必须 编 
写 服 务 器 端的 脚本 程序 。 

2. 认识 表单 域 

使 用 Dreamweaver CS6 可 以 创建 表 
单 、 向 表单 中 添加 对 象 以 及 使 用 行为 来 验 
证 用 户 输入 的 信息 等 。 表 单 对 象 包含 在 表 
单 域 中 ,表单 域 定义 了 一 个 表单 的 开始 和 
结束 ,在 HTML 4 中 所 有 表单 对 象 都 要 放 
在 表单 域 中 才 会 生效 ,而 在 HTML 5 中 开 
发 者 可 以 把 它们 书写 在 任何 地 方 ,只 需 为 
该 元 素 指定 form 属性 ,属性 值 与 该 表单 的 
id 属性 值 相对 应 即 可 。 

创建 表单 域 的 方法 如 下 。 


息 欢迎 注册 360 云 盘 


邮箱 


密码 


确认 窗 码 


人 @ 请 输 入 您 的 常用 邮箱 ， 没 有 邮箱 ? 


人 定 码 应 为 6-20 个 字符 ， (区 分 大 小 写 ) 


医 


已 经 阅读 并 同意 《360 用 户 服务 条 款 » 


图 6-21 表单 的 实际 应 用 


(1) 启动 Dreamweaver CS6 ,创建 HTML 5 文档 ,将 光标 定位 在 希望 表单 出 现 的 位 
置 上 。 在 插入 面板 中 选择 “表单 ”类别 ,然后 单 击 其 中 的 图 按钮 。 

(2) 这 时 弹出 如 图 6-22 所 示 的 对 话 框 ,用 户 可 以 根据 实际 情况 对 参数 进行 设置 , 单 
击 * 确 定 ? 按 钮 后 ,软件 在 页 面 的 设计 视图 中 会 自动 添加 红色 虚线 矩形 ,这 就 是 表单 的 轮廓 


指示 线 , 如 图 6-23 所 示 。 


二 | forn - 常规 


onReset 


常规 
样式 表 /辅助 功能 
语言 
日 事件 
onSubmit 


onPli ck 


onDblClick 
— onllouseDown 
onllouselp 
onllouseOver 


6-22 “标签 编辑 器 ”对 话 框 


表单 对 应 的 属性 面板 中 各 参数 名 称 及 功能 如 表 6-1 所 示 。 
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图 6-23 ”添加 表单 域 


表 6-1 表单 的 参数 名 称 及 功能 


属性 名 称 功 能 
ID 表单 标识 名 称 | 表单 的 名 称 ,该 名 称 可 以 使 用 脚本 语言 引用 或 控制 该 表单 
name 表单 名 称 表单 的 名 称 ,与 ID 具有 相同 的 意思 
action | 动作 该 属性 用 于 定义 将 表单 数据 发 送 到 哪个 地 方 , 其 值 采用 URL 的 方式 , 即 
处 理 表单 数据 的 页 面 或 脚本 
默认 值 : 浏览 器 一 般 默认 方法 为 GET 
ee GET: 把 表单 值 添加 给 URL, 并 向 服务 器 发 送 GET 请 求 。 因 为 URL 被 
限定 在 8192 个 字符 内 ,所 以 内 容 过 多 的 表单 不 要 使 用 GET 方法 
POST: 在 消息 正文 中 发 送 表单 值 ,并 向 服务 器 发 送 POST 请 求 
设置 发 送 表单 到 服务 器 的 媒体 类 型 , 它 只 在 发 送 方 法 为 POST 时 才 有 效 ， 
ectype “| 编码 类 型 其 默认 值 为 application/x-www-form-urlencode; 如 果 创 建 的 是 文件 上 传 
域 , 则 应 该 选择 multipart/form-data 
_blank: 指 的 是 在 新 窗口 中 打开 目标 文档 
_parent: 指 的 是 在 显示 当前 文档 窗口 的 父 窗口 中 打开 目标 文档 
target 目标 
_self: 指 的 是 在 当前 窗口 打开 目标 文档 
_top: 指 的 是 在 当前 窗口 的 窗 体内 打开 目标 文档 


6.3.2 常见 表单 对 象 


表单 域 定义 完成 后 ,就 可 以 为 表单 添加 各 种 表单 对 象 了 。 首 先 将 光标 定位 在 表单 域 
内 要 插入 表单 对 象 的 地 方 ,然后 在 插入 面板 的 “表单 ”类 别 中 选择 要 插入 的 表单 对 象 即 可 。 
下 面 分 别 介绍 常见 表单 对 象 的 使 用 方法 及 其 属性 设置 。 


1. 添加 文本 字段 


【案例 6-7】 


添加 文本 域 对 象 。 


Q@ 在 插入 面板 的 “表单 "类 别 中 单 击 上 按钮 , 即 可 插入 文本 域 表 单 对 象 ,如 图 6-24 


所 示 。 


~ 
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图 6-24 ”添加 文本 字段 对 象 


文本 域 属性 面板 中 的 各 参数 名 称 及 功能 如 表 6-2 所 示 。 
表 6-2 文本 域 属性 面板 中 的 参数 名 称 及 功能 


属 性 对 应 属性 面板 中 的 名 称 功 能 
name 文本 域 该 名 称 是 后 期 程序 处 理 数据 的 依据 
size 字符 宽度 用 于 设置 文本 域 中 最 多 可 显示 的 字符 数 
maxlength 最 多 字符 数 用 于 设置 文本 域 在 单行 文本 域 中 最 多 可 输入 的 字符 数 
value 初始 值 用 于 设置 在 首次 加 载 表 单 时 域 中 显示 的 值 
class 类 用 于 设置 当前 对 象 应 用 何 种 CSS 规则 
readonly 只 读 用 于 设置 文字 域 是 否 具 有 可 编辑 性 
disabled 禁用 禁用 当前 文本 域 


@ 文本 域 中 除了 能 够 输入 单行 的 文本 ,还 能 够 插入 多 行文 本 来 实现 文本 内 容 的 滚动 
效果 。 在 文本 域 属性 面板 中 , 单 击 “ 多 行 " 单 选 按 钮 ,此 时 文本 域 和 属性 面板 均 发 生变 化 ， 


如 图 6-25 所 示 。 


<form action="" method="get" name="abc" id= 全 


图 6-25 多 行文 本 域 
与 单行 文本 域 不 同 的 是 ,多 行文 本 域 属性 面板 中 “字符 宽度 ”设置 对 应 代码 视图 中 
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cols 属性 ， 行 数 ?设置 对 应 代码 视图 中 rows 属性 。 
@ 此 外 ,在 文本 域 属性 面板 中 , 单 击 “ 密 码 " 单 选 按钮 ,文本 域 就 变 为 密码 框 了 ,其 
属性 设置 和 单行 文本 域 相同 ,只 不 过 在 预览 时 文本 框 的 内 容 将 以 “* ”号 的 形式 显示 。 


2. 添加 复 选 框 

复 选 框 一 次 可 以 选择 一 个 ,也 可 以 选择 多 个 ,主要 用 于 标记 该 项 内 容 是 否 提 前 被 
选中 。 

【案例 6-8】 添加 复 选 框 对 象 。 

@ 创建 表单 域 ,将 光标 定位 在 表单 域 中 。 在 插入 面板 的 “表单 ”类 别 中 单 击 “ 复 选 
框 ? 按 钮 呵 , 即 可 插入 复 选 框 。 在 复 选 框 后 面 输入 相应 的 文字 , 即 可 完成 复 选 框 的 整个 
内 容 。 

@ 按照 此 种 办 法 ,可 以 添加 多 个 复 选 框 ,如 图 6-26 所 示 。 需 要 特别 注意 的 是 , 若 
要 多 个 复 选 框 组 成 一 组 为 某 一 选项 提供 选择 , 则 需要 将 该 组 内 的 复 选 框 设置 为 相同 的 
名 称 。 


下 面 是 单个 的 复 选 框 ， 
label> UE a 
[US _ oi x B86v 1K/1 黎 Unicode (TF-6) 


EJ 
[ad 
摹 
[2 
辑 
[ehecisox | 


图 6-26 添加 复 选 框 对 象 


选择 某 一 复 选 框 ,其 属性 面板 中 的 各 参数 名 称 及 功能 如 表 6-3 所 示 。 
表 6-3 复 选 框 属性 面板 中 的 各 参数 名 称 及 功能 


属 性 | 对 应 属性 面板 中 的 名 称 功 能 
name 复 选 框 名 称 指定 复 选 框 对 象 的 名 称 ,用 来 区 别 复 选 框 的 内 容 
value 选 定 值 当 用 户 选择 复 选 框 时 ,该 值 将 被 递交 到 服务 器 进行 参数 运算 
checked 初始 状态 当 浏 览 器 载 人 表单 时 ,用 于 设置 复 选 框 是 否 被 预先 选中 
3. 添加 单 选 按钮 组 


单 选 按钮 对 象 用 于 设计 者 希望 访问 者 在 多 个 选项 中 只 能 选择 一 个 选项 时 使 用 。 

【案例 6-9】 添加 单 选 按钮 组 。 

Q@ 新 建 HTML 5 文档 ,并 在 其 中 创建 表单 域 ,将 光标 定位 在 表单 中 。 

@ 在 插 和 人 面板 的 “表单 "类别 中 单 击 * 单 选 按钮 组 ”按钮 图 ,打开 * 单 选 按钮 组 "对话 
框 ,如 图 6-27 所 示 。 

@ 在 “名 称 "文本 框 中 ,输入 单 选 按钮 组 的 名 称 。 单 击 加 号 轩 按 钮 向 该 组 添加 一 个 单 
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名 称 : RadioCroupl ] [Em 
RD ee EBD 
标 答 值 i 
单 选 单 选 
单 选 单 选 


布局 ,使 用 加 换行 符 ( <br> 标签 ) 
日 表格 


6-27 “ 单 选 按钮 组 ”对 话 框 


选 按钮 , 单 击 向 上 或 向 下 箭头 按钮 对 这 些 单 选 按 钮 重新 进行 排序 。 根 据 需 要 选择 使 用 “ 换 
行 符 ” 或 “表格 "来 设置 之 前 创建 的 单 选 按钮 组 的 布局 。 设 置 完 成 后 , 单 击 “ 确 定 ” 按 钮 , 即 
可 插入 一 组 单 选 按钮 ,如 图 6-28 所 示 。 选 择 单 选 按钮 组 中 的 某 个 单 选 按钮 ,可 以 发 现 其 
属性 面板 中 的 各 参数 与 其 他 表单 对 象 属性 雷同 ,这 里 不 再 过 多 解释 。 


”| 您 认为 明天 股市 走向 如 何 ? 


图 6-28 插入 单 选 按钮 组 


4. 添加 列表 或 菜单 

列表 或 菜单 表单 对 象 能 够 显示 多 个 选项 ,用 户 可 以 在 滚动 列表 或 下 拉 菜 单 中 进行 选 
择 , 在 滚动 列表 中 用 户 可 以 选择 多 个 选项 ,在 下 拉 菜 单 中 只 能 选择 一 个 选项 。 

【案例 6-10】 添加 列表 或 菜单 。 

@ 新 建 HTML 5 文档 ,并 在 其 中 创建 表单 域 ,将 光标 定位 在 表单 中 。 

@ 在 插入 面板 的 “表单 ”类别 中 单 击 加 按钮 , 即 可 在 表单 域 中 插入 一 个 菜单 选项 。 

@ 选择 刚才 创建 的 表单 对 象 ,在 其 属性 面板 中 选择 “菜单 ”类 型 或 “列表 ”类 型 。 若 选 
择 “ 菜 单 ” 类 型 ,表单 在 浏览 器 中 将 只 有 一 个 选项 可 见 ; 若 选择 “列表 ”类 型 ,表单 在 浏览 器 
中 将 显示 一 组 可 选项 。 这 里 以 “菜单 ”类 型 为 例 进 行 讲解 。 

@ 将 该 表单 设置 为 “菜单 类型, 单 击 “ 列 表 值 ”按钮 。 这 时 打开 “列表 值 ” 对 话 框 ,如 
图 6-29 所 示 。 在 该 对 话 框 中 , 单 击 四 按钮 增加 一 个 项 目标 签单 击 回 ] 按 钮 则 可 以 删除 一 
个 项 目标 签 。 根 据 需 要 为 每 个 菜单 项 设置 相应 的 值 。 

@ 单 击 “ 确 定 ” 按 钮 ,返回 软件 主 界面 。 通 过 浏览 器 预览 后 的 效果 如 图 6-30 所 示 。 
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: | 硕士 研究 生 


硕士 研究 生 
博士 研究 生 

硕士 研究 本 有 
博士 研究 生 


图 6-29 “列表 值 ? 对 话 杠 图 6-30 菜单 对 象 预览 效果 


@ 将 该 表单 设置 为 列表 ”类 型 ,此 时 “高 度 ”" 和 “ 选 定 范围 "属性 处 于 可 编辑 状态 ,这 
里 将 高 度 设置 为 3, 并 选中 “允许 多 选 " 复 选 框 ,如 图 6-31 所 示 。 通 过 浏览 器 预览 后 的 效果 
如 图 6-32 所 示 。 


图 6-32 ”列表 对 象 预览 效果 


5. 添加 跳 转 菜单 
在 跳 转 菜单 中 选择 某 一 选项 ,可 以 链接 到 任何 指定 的 URL, 这 种 表单 通常 用 于 实现 


导航 效果 。 

【案例 6-11】 添加 跳 转 菜单 。 

新 建 HTML 5 文档 ,并 在 其 中 创建 表单 域 ,将 光标 定位 在 表单 中 。 

@ 在 插入 面板 的 “表单 ”类别 中 单 击 * 跳 转 菜单 "按钮 习 , 打 开 * 插 入 跳 转 菜单 "对 
话 框 。 
@ 根据 需要 添加 跳 转 菜单 的 内 容 。 单 击 团 按 钮 增加 一 个 菜单 项 ,在 “文本 "区域 输入 
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跳 转 菜单 项 的 名 称 , 在 “选择 时 , 转 到 URL” 文 本 框 内 输入 跳 转 的 路 径 , 如 图 6-33 所 示 。 
其 他 选项 读者 可 根据 需要 自行 设置 。 

@ 单 击 “ 确 定 ” 按 钮 , 即 可 完成 跳 转 菜单 的 插入 。 通 过 预览 可 以 发 现 ,当选 择 跳 转 菜 
单 中 的 某 一 选项 后 , 便 会 打开 该 选项 对 应 的 网 站 ,如 图 6-34 所 示 。 


文本 劳 宁 易 购 


选择 时 ， 转 到 URL http://www. suning. com/ 


打开 URL 于 : [E 窗 口 
表单 ID: jumpltenu 
选项 四 菜单 之 后 插入 前 往 按 乌 通道 ; 
更 改 URL 后 选择 第 一 个 项 目 天 猫 


京东 商城 


苏宁 易 购 


图 6-33 “插入 跳 转 菜单 ”对 话 框 图 6-34 ” 跳 转 菜单 预览 效果 


6. 添加 按钮 

按钮 对 象 在 表单 中 必 不 可 少 , 该 对 象 可 以 将 表单 内 的 数据 提交 到 服务 器 中 ,或 者 重 置 
该 表单 。 默 认 状 态 下 按钮 外 观 一 般 不 能 满足 实际 需要 ,通常 需要 配合 CSS 对 按钮 进行 美 
化 ,具体 内 容 后 续 章 节 陆 续 讲 解 , 这 里 仅 对 按钮 对 象 的 添加 进行 讲述 。 

【案例 6-12】 添加 按钮 。 

Q@ 新 建 HTML 5 文档 ,并 在 其 中 创建 表单 域 ,将 光标 定位 在 表单 中 。 

@ 在 插入 面板 的 “表单 ”类别 中 单 击 “ 按 钮 "按钮 , 即 可 插入 一 个 按钮 。 

@ 选择 刚 插入 的 按钮 ,在 其 属性 面板 中 根据 需要 选择 按钮 的 动作 ,如 图 6-35 所 示 。 
修改 “ 值 " 的 内 容 , 可 以 改变 按钮 上 面 显示 的 文本 。 


图 6-35 ”添加 按钮 对 象 


在 属性 面板 中 ,“ 动 作 ” 包 含 3 种 。 选 择 “ 提 交 表 单 ” 时 , 单 击 按钮 后 ,表单 数据 将 被 提 


第 6 章 表格 与 表单 


交 到 指定 页 面 或 脚本 ;选择 * 重 设 表单 "时 , 单 击 按钮 后 ,将 清除 表单 中 的 内 容 ; 选 择 * 无 ” 
时 , 单 击 按钮 后 ,无 任何 动作 。 


7. 表单 的 自动 验证 

在 HTML 5 中 ,通过 对 元 素 使 用 属性 的 方法 ,可 以 实现 表单 提交 时 自动 验证 的 功能 ， 
这 里 向 读者 介绍 required 属性 和 pattern 属性 。 

required 属性 可 以 被 使 用 在 大 多 数 的 元 素 上 (隐藏 元 素 、 图 片 元 素 除外 )。 在 提交 时 ， 
如 果 该 元 素 内 容 为 空 , 则 不 允许 提交 。 

pattern 属性 适用 于 以 下 input 类 型 : text search ,url telephone email 和 password 。 
该 属性 规定 了 用 于 验证 输入 字段 的 标准 ,开发 者 可 以 通过 正则 表达 式 完 成 对 标准 的 
创建 。 

【案例 6-13】 表单 的 自动 验证 。 

Q@ 新 建 HTML 5 文档 ,在 其 中 创建 两 个 表单 域 ,并 在 其 中 插入 两 组 文本 域 和 提交 
按钮 。 

@ 插入 完成 后 ,分 别 为 input 元 素 添加 required 属性 和 pattern 属性 ,具体 的 代码 如 
图 6-36 所 示 。 


<56ayy 
<form action="" method="get" id="a"> 


<p> 姓名 : 


ame="a" id="a" type="text" required> 
<input name="a" id="a" type="submit" value=" 提 交 ": 


</p> 
</form> 
<form action="" method="get" id="b"> 
<p> 输 入 
<in e="b" type="text" pattern="[A-z]{3)" 


<input name="b" type="submit" value=" 提 交 "> 
</p> 
</form> 
</body> 


6-36 ”插入 required 属性 和 pattern 属性 


@ 保存 当前 网 页 文档 ,在 浏览 器 中 预览 时 ,在 违反 预 设 条 件 的 前 提 下 分 别 单 击 “ 提 
交 ” 按 钮 ,此 时 预 设 的 required 属性 和 pattern 属性 会 自动 判断 文本 域 中 的 值 是 否 符合 要 
求 ,并 显示 警告 文字 ,如 图 6-37 和 图 6-38 所 示 。 


家 友 此 向 】 加 请 填写 此 字段 。 


加 请 与 所 请 求 的 格式 保持 一 致 


图 6-37 无 输入 内 容 时 提交 图 6-38 输入 格式 错误 时 提交 


= 
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6.4 CSS 在 表单 中 的 应 用 


通过 Dreamweaver 软件 自动 创建 的 表单 ,外 观 风格 一 般 不 能 满足 工作 需要 。 因 此 ， 
本 节 主 要 向 读者 介绍 使 用 CSS 控制 表单 外 观 的 基本 方法 。 通 过 本 节 的 学 习 , 读 者 能 够 掌 
握 美 化 表单 的 基本 思路 和 过 程 。 


6.4.1 文本 域 的 美化 


通过 CSS 样式 可 以 对 文本 域内 的 字体 .颜色 以 及 背景 图 像 加 以 控制 。 下 面 以 实例 的 
形式 介绍 如 何 使 用 CSS 美化 文本 域 。 

【案例 6-14】 文本 域 的 美化 。 

z 在 空白 的 HTML 5 文档 中 创建 表单 域 , 并 将 光标 定位 在 表单 中 。 

@ 在 插入 面板 的 “表单 "类别 中 单 击 “ 文 本 字段 "按钮 ,创建 两 个 文本 框 ,并 将 该 文本 
框 的 ID 属性 分 别 设置 为 textfield-1 和 textfield-2, 此 时 效果 如 图 6-39 所 示 。 


extfield-1"| /p> 
上 name="textfield-1" 上 
type="text" id="textfield-2"> 

名 为 "cexcfield-2" 的 文本 框 </p> 


</form> 
1 


图 6-39 ”插入 两 个 文本 框 


@ 在 当前 页 面 顶部 head 区 域 的 内 部 ,插入 对 应 的 CSS 样式 规则 ,如 图 6-40 所 示 。 
保存 当前 页 面 ,通过 浏览 器 预览 后 的 效果 如 图 6-41 所 示 。 


SEYIE Type="text/css"S 
textrield-2 { 
widch: 150px;/* 设 置 文本 域 宽度 */ 
heighc: 20px;/* 设 置 文本 域 高 度 。/ 
line-height: 20px;/* 设 置 文本 域内 文字 行 高 ， 目 的 让 文字 秋 直 居中 */ 
color: #666;/* 设 置 文本 域内 文字 颜色 */ 
font-size: 14px;/* 设 置 字 体 大 小 */ 
border; ipx solid #D4D4D4;/* 使 用 线 框 美化 文本 域 */ 
background: url(6-14username bg.jpg) no-repeat left center; 
/* 为 文本 域 添加 背景 图 像 ， 并 使 其 水 平局 左 ， 生 直 居 中 对 齐 */ 
padding-left: 20px;/* 设 置 左边 距 ， 为 图 像 预 禄 显示 位 置 */ 
/atyle> 


图 6-40 ”针对 textfield-2 编写 CSS 规则 


需要 说 明 的 是 ,本 案例 中 使 用 ID 选择 符 对 具体 的 文本 域 进 行 美化 ,而 在 实际 工作 中 
可 以 预先 编写 类 规则 ,然后 应 用 在 多 个 文本 域 中 ,这 样 工作 效率 将 会 更 高 。 


6.4.2 CSS 3 按钮 


按钮 在 网 页 中 出 现 的 频率 较 多 ,在 实际 工作 中 有 多 种 方法 能 够 实现 按钮 效果 : 一 是 
使 用 a 元 素 , 再 配合 相应 的 CSS 规则 使 其 呈现 按钮 外 观 ,例如 网 上 购物 中 “加 入 购物 车 ” 
按钮 ;二 是 使 用 button 元 素 创建 按钮 ;三 是 使 用 input 元 素 的 button 类 型 创建 按钮 ,例如 
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1234567890 ] 名 为 “textfield-1” 的 文本 框 


[B 1234567890 名 为 “textfield-2” 的 文本 框 
人 


6-41 美化 后 的 文本 域 预览 效果 


用 户 注册 时 的 “立即 注册 ?按钮 。 

需要 说 明 的 是 ,button 元 素 与 二 input type 一 "button" 二 相 比 ,提供 了 更 为 强大 的 功 
能 和 更 丰富 的 内 容 。 所 button> 与 二 /button> 标 签 之 间 的 所 有 内 容 都 是 按钮 的 内 容 , 但 不 
同 的 浏览 器 会 提交 不 同 的 值 ,其 中 包括 任何 可 接受 的 正文 内 容 , 比 如 文本 或 多 媒体 内 容 。 在 
需要 提交 用 户 表单 内 容 时 ,建议 读者 请 使 用 input 元 素 在 HTML 表单 中 创建 按钮 。 

【案例 6-15】 CSS 3 按钮 。 

OO 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 创建 表单 域 ,并 将 光 
标定 位 在 表单 域 中 。 

@ 在 插入 面板 的 “表单 ”类别 中 单 击 “ 按 钮 "按钮 ,创建 一 个 按钮 ,并 将 该 按钮 的 id 属 
性 设置 为 mybutton ,value 属性 设置 为 Down Load。 

@ 在 当前 页 面 顶部 head 区 域内 ,针对 mybutton 对 象 编写 CSS 规则 ,如 图 6-42 所 
示 。 保 存 当前 页 面 , 当 鼠 标 悬 停 在 按钮 上 时 即 可 看 到 效果 ,如 图 6-43 所 示 。 


style type-"text/cssrS 
#mybutton { 
font: 30px "微软 雅 黑 *; 
text-shadow: lpx 1px 0 rgba(255,255,255,0.4);/* 设 置 字体 阴影 效果 */ 
cursor: pointer;/* 设 置 忌 标 悬 售 时 有 ~ 手 型 "显示 */ 
padding: 10px 20px; 
background-color: #48b5f2; 
background-repeat: no-repeat; 
background-position: borttom left:/* eb 图 像 左下 角 对 齐 */ 
background-image: url(6-15button_ bg.p: 
background-clip: border-box;/* “办 es 司 向 四 胃痛 及 “/ 
border-radius: 8px:/* 图 角 边 框 */ 
box-shadow: 0 0px Spx #fff inset;/* 设 置 按钮 高 光 效果 */ 
transition-property: background-position;/* A CSS 属性 的 名 种 */ 
transition-duration: 13;/* 规 定 完成 过 渡 效 果 需 要 多 
border: ilpx solid #84acc3;/* 设 置 按钮 边框 </ 
) 
4myburcon:hover { 
background-position: top left; 
}/* 设 置 限 标 悬 售 时 背景 图 像 定 位 的 位 置 */ 


</style> 


图 6-42 mybutton 对 象 的 CSS 规则 


6-43 ”CSS 3 按钮 最 终 效果 
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本 案例 中 利用 CSS 3 的 box-shadow background-clip ,border-radius 和 transition 等 
属性 ,创建 了 一 个 具有 动感 的 按钮 ,而 在 实际 工作 中 ,可 根据 需要 进行 相关 设置 ,并 不 拘泥 
于 当前 制作 思路 。 


6.4.3 搜索 框 的 美化 


搜索 框 是 一 个 网 站 必 不 可 少 的 组 成 部 分 , 它 的 美观 程度 直接 决定 着 网 站 的 用 户 体验 。 
这 里 以 实例 的 形式 向 读者 介绍 搜索 框 的 美化 过 程 。 

【案例 6-16】 搜索 框 的 美化 。 

@ 启动 Dreamweaver CS6, 创 建 空白 HTML 5 文档 ,在 文档 中 创建 名 为 search_box 
的 DIV 容器 ,并 在 容器 中 创建 表单 域 。 

@ 将 光标 定位 在 表单 域 中 ,在 插入 面板 的 “表单 "类别 中 单 击 “文本 字段 "按钮 ,插入 
一 个 单行 文本 框 。 在 文本 框 的 后 面 , 继 续 插入 图 像 域 ,此 时 的 页 面 结构 如 图 6-44 所 示 。 


<div id="search box" > 
n="" method="get"> 


<input name="textfield" type="text" class="searchinput" id="textfield" value=" 请 输入 查找 关键 字 "/> 


<input name="" type="image" src="6-16search go.gif" class="searchaction"> 
</form> 

</div> 

</body> 


图 6-44 ”当前 页 面 结构 


@ 为 了 改变 表单 的 外 观 样式 ,这 里 拟定 义 searchinput 和 searchaction 类 规则 ,分 别 
作用 在 文本 框 和 图 像 域 上 ,使 其 改变 外 观 。 在 当前 页 面 顶 部 head 区 域内 ,编写 相关 CSS 
规则 ,如 图 6-45 所 示 。 

@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 6-46 所 示 。 


[scyle type="text/css"> 
#search box 1 

border: #CCC lpx solid; 

height: 27px; 

width: 210px; 
} 
,searchinput { 

border: 0;/* 取 消 搜索 框 默认 边框 样式 */ 

padding-left: 3px; 

width: 170px; 

height: 25px; 

line-height: 25px; 

float: left; 

color: #636365; 

font-size: 14px; 
) 
.searchaction { 丫 搜索 杠 的 美化 x 


float: left; PE 


width: 21px; 
margin-top: Spx; 请 输入 查找 关键 字 a 


height: 17px; 
margin-left: Spx; RN 


) 
/style> 


图 6-45 案例 6-16 的 CSS 规则 6-46 “搜索 框 的 美化 ”预览 效果 
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6.5 过程 指 导 一 一 “Yuze App 注册 ”页 面 的 制作 


本 节 主 要 使 用 表单 对 象 创建 一 个 注册 页 面 所 需 的 基本 信息 ,再 结合 CSS 阴影 和 CSS 
圆 角 等 内 容 ,实现 对 表单 的 美化 。 通 过 本 节 的 学 习 , 读 者 能 够 掌握 表单 元 素 的 基本 使 用 方 
法 ,以 及 巩固 border-radius、box-shadow 和 CSS 定位 的 相关 知识 。 
6.5.1 过 程 分 析 


通过 对 实际 任务 的 理解 ,本 节 需 要 完成 的 页 面 最 终 效果 如 图 6-47 所 示 。 从 最 终 效果 
来 看 ,整个 页 面 的 布局 较为 简单 ,通过 深思 熟 虑 ,页 面 布局 如 图 6-48 所 示 。 


Ga 


Yuze App 注册 


A Yuze App 注 册 


PS 


#ha 


Copyright © 2014 字 汉 互 联 rights reserved 


图 6-47 Yuze App 注册 页 面 最 终 效 果 


6.5.2 步骤 详解 


1. 前 期 准备 工作 

(1) 启动 Dreamweaver CS6 ,创建 站 点 ,然后 将 新 建 的 HTML 5 空白 文档 保存 在 该 
站 点 中 ,并 命名 为 index. html。 

(2) 在 站 点 中 创建 images 和 style 两 个 文件 夹 ,分 别 存 放 页 面 修饰 图 片 和 CSS 样式 
区 和 

(3) 创建 一 个 外 部 CSS 样式 表 style. css, 将 其 与 index. html 文档 进行 链接 。 
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header 


container 


logo 


register-container 


iphone register 


footer 


图 6-48 布局 示意 图 


2. 页 面 初始 化 与 头 部 区 域 的 制作 

(1) 在 代码 视图 中 ,使 用 手动 输入 的 方式 根据 布局 示意 图 创建 嵌 套 的 相关 容器 ,此 时 
的 页 面 结构 如 图 6-49 所 示 。 

(2) 切换 到 style. css 文件 中 ,创建 初始 化 规则 和 对 应 容器 的 CSS 规则 ,如 图 6-50 和 
图 6-51 所 示 。 


boay 《 
background: #r8f8f8; 
text-align: left; 
font-family: "微软 雅 黑 "; 


Color: #555; 
<header class="header"> font-size: 16px; 
<div class="container"> font-weight: 400; 
<div class="logo"> 
<h1><a href="">Yuze App 注册 </a></h1>| 
</div> text-decoration: none; 
</div> color: #555; 
</header> 


图 6-49 页面 头 部 区 域 的 页 面 结构 图 6-50 页 面 初始 化 规则 


(3) 保存 当前 页 面 ,通过 浏览 器 预览 后 的 效果 如 图 6-52 所 示 。 


3. 注册 区 域 的 制作 

(1) 在 二 header class 一 "header" 盖 一 /header 二 标签 的 后 面 , 创 建 用 于 盛 放 注册 区 域 
所 有 元 素 的 容器 ,具体 页 面 结构 如 图 6-53 所 示 。 

(2) 在 二 div class 一 "iphone" 盖 二 /div 之 标签 内 部 ,插入 预 先 准备 好 的 手机 图 像 。 然 
后 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 6-54 所 示 。 

(3) 在 二 div class 一 "register" 二 一 /div 二 标签 内 部 ,使 用 多 个 表单 元 素 创 建 注册 时 所 
需 的 基本 对 象 , 具 体 的 页 面 结构 如 图 6-55 所 示 。 

(4) 在 实际 工作 中 ,要 想 制作 出 精美 的 表单 效果 就 需要 逐个 对 不 同 的 表单 类 型 编写 
CSS 规则 ,切换 到 style. css 文件 中 ,具体 规则 如 图 6-56 和 图 6-57 所 示 。 


第 6 章 表格 与 表单 


-header T 
margin: 0 auto; 
padding-bottom: Spx; 
background: #f8f8f8 url(../images/pattern.jpg) 
border-top: spx solid #eb4141; 
-moz-box-shadow: 0 1px Spx 0 rgba(0,0,0,.8); 


-webkit-box-shadow: 0 ipx 5px 0 rgba(0,0,0,.8); 


box-shadow: 0 1px 5px 0 rgba(0,0,0,.8);/* 设 置 容器 的 阴影 效果 ， 并 


且 指 定 阴影 的 颜色 和 透明 度 */ 

} 

.concainer { 
width: 940px; 
margin-right: auto; 
margin-left: auto; 

} 

.container:before, 
display: table; 
Content: ""; 
line-height: 


-conrainer:afcer { 


0 
} 
.container:after 
clear: boch; 
)/* 使 用 擅 类 的 方式 清除 浮动 */ 
.1ogo {width: 400px;) 
‘logo hl { 
padding-left: 50px 
font-family; "微软 雅 
font-size: 36px 
font-weight: 400; 


left top repeat; 


图 6-51 


页 面 头 部 相关 容器 CSS 规则 


Yuze App 注册 


6-52 页面 头 部 预览 效果 
这 里 对 该 容器 同时 应 用 两 个 类 规则 


(header class="header"> 
Kdiv ci 
|</header> 
div class="register-cortainer container">| 
<div class="iphone"></div> 
<div class="register"></div> 
/div> 


图 6-53 注册 区 域 的 页 面 结构 


图 


“register-container { 
margin-top: SOpx; 

} 

,iphone { 
text-align: 
float: left; 


right; 


} 
.iphone img { 


margin-right: 10px; 


6-54 手机 图 像 的 CSS 规则 


[SHY class="register"y 
<form action="" method="post"> 
<h2>Yuze App 注 册 </h2> 


<label for-"username"> 用 户 名 </1abel> 
<inpur text” id-"username" name-"usertname" placeholder-" 请 在 这 里 输入 用 户 名 "> 
<label tel"> 手 机 号 码 </1abel> 
<inpurt texrw id-"tel" name-"tel" placeholder-" 请 在 这 里 输入 手机 号 码 "> 
<label emailw> 邮 箱 地 址 </1abel> 
<input text" id-wemailw name-"email” placeholder-" 请 在 这 里 输入 邮箱 地 址 "> 
<label passwordn> 密 码 </1abel> 
<inpur type-"text" id="password” name-"password" placeholder-" 请 在 这 里 输入 登录 密码 "> 
<label passwordagain"> 确 认 密码 </1abel> 
<inpurt password" id-"passwordagain” name-"passwordagain" Placeholdez-" 请 再 次 输入 登录 密码 "> 
<button cype="submic"> 注 册 </burcony 

</form> 
</div> 


图 6-55 ”使 用 多 个 表单 元 素 创建 注册 时 所 需 的 基本 对 象 
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register T 
float: left; 
padding-cop: 100px; 
width: 460px: 
) 
.register form { 
padding: 20px 50px 40px SOpx; 
background: #f8f8f8 url(../images/pattern.jpg) 
eft top repeat; 
-moz-border-radius: 8p: 
-webkit-border-radius: 8px; 
border-radius: 8px; 
-moz-box-shadow: 0 lpx Spx 0 rgba(0,0,0,.3); 
-webkic-box-shadow: 0 1px Spx 0 rgba(0,0,0,.3); 
box-shadow: 0 1px Spx 0 rgba(0,0,0,.3); 


} 
‘register form h2 { 
margin-bottom: 25px; 
padding-bottom: 15px; 
background: urll(../images/pencil.png) 35px 6px 
Ino-repeat; 
border-bottom: 2px dorced #bbb; 
font-size: 30p: 
font-weight: 400; 


text-align: center; 


6-56 ”表单 CSS 规则 (1) 


register form input 1 
width: 95%; 
height: 30px; 
background: #fcfcfc; 
border: 1px solid #ddd; 
-moz-border-radius: 2px; 
-webkic-border-radius: 2px; 
border-radius: 2px; 
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset; 
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inserc: 
box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset; 
color: #888; 
font-size: 16px; 
display: block; 


} 
,register form label { 
margin: Tpx 0 10px Spx; 
font-size: 16px; 
text-align: left; 
) 
register form button { 
display: block; 
cursor: pointer; 
width; 95%; 
height; 42px; 
margin-top: 25px; 
padding: 0; 
background: #eb4141; 
-moz-border-radius: 3px; 
—webkit-border-radius: 3px; 
border-radius: 3px; 
border: 0; 
-moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset; 
—webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset; 
box-shador 0 15px 30px 0 rgba(255,255,255, .1) inset; 
font-size: 16px; 
font-family: "微软 雅 
color: #fff; 


6-57 ”表单 CSS 规 则 (2) 


在 上 述 的 规则 中 ,大 部 分 规则 用 于 实现 圆 角 边框 和 阴影 效果 。 另 外 ,在 样式 代码 属性 
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方面 ,由 于 多 种 浏览 器 使 用 的 内 核 不 同 , 需 要 针对 不 同 的 内 核 单独 编写 ,例如 box-shadow 
(针对 Internet Explorer 浏览 器 )、-webkit-box-shadow (针对 Chrome 浏览 器 ) 和 -moz- 
box-shadow( 针 对 火狐 浏览 器 ) 规 则 ,其 本 质 是 一 条 规则 。 

(5) 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 。 


4. footer 区 域 的 制作 
(1) 在 二 div class 一 "register-container container" 二 一 /div 二 标签 的 后 面 , 使 用 
footer 元 素 创建 版 权 区 域 的 内 容 , 具 体 结构 如 图 6-58 所 示 。 


header class="header"> 
</header> 

<div class="register-container container"> 

</div> 

|<footer id="footer">Copyright Ecopy; 2015 宇 泽 互联 rights reserved.</footer 


图 6-58 版 权 区 域 页 面 结构 


(2) 切换 到 style. css 文件 中 ,创建 <# footer {text-align: center;)”CSS 规则 ,保存 当 
前 页 面 ,通过 浏览 器 预览 即 可 看 到 最 终 效果 。 

至 此 ,“Yuze App 注册 页 面 ?的 制作 到 此 结束 ,读者 可 以 根据 自己 的 需要 修改 相关 
CSS 的 内 容 , 让 页 面 变 得 更 加 漂亮 。 


6.6 自主 任务 一 一 “网 站 后 台 登 录 ” 页 面 的 制作 


结合 本 章 所 讲 的 知识 ,完成 “网 站 后 台 登 录 页 面 ” 的 制作 ,请 读者 在 制作 过 程 中 着 重 体 
会 CSS 控制 表单 对 象 的 方法 和 思路 。 页 面 最 终 效果 和 布局 如 图 6-59 和 图 6-60 所 示 。 


6-59 网 站 后 台 登 录 页 面 最 终 效 果 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


6.7 


Dw 


header 


bannerwrap 


banner 


login-aside 


footer 


6-60 ”网 站 后 台 登 录 页 面 布 局 示意 图 


习题 


. 表格 的 作用 是 什么 ? 

. 在 CSS 中 border-collapse 属性 的 作用 是 什么 ? 

. 使 用 伪 类 选择 器 制作 一 组 10 行 6 列 隔 行 换 色 的 表格 。 
. 表单 的 作用 是 什么 ? 常见 的 表单 对 象 有 哪些 ? 

. 在 HTML 5 中 哪 两 种 属性 能 够 实现 表单 的 自动 验证 ? 
.如何 创建 复 选 框 和 单 选 按钮 7 

.按照 图 6-61 所 示 的 页 面 效果 制作 登录 框 。 


台 登录 框 
< SeCla 


Members Login 


Password 


图 6-61 习题 7 页 面 效 果 


第 7 章 


框架 、 模 板 与 CSS 3 新 增 布局 


【本 章 导 读 】 

框架 为 开发 者 提供 一 个 将 浏览 器 窗口 划分 多 个 区 域 的 方法 ;模板 的 灵活 运用 能 够 帮 
助 开 发 者 快速 地 创建 布局 结构 类 似 的 页 面 ;CSS 布局 的 相关 知识 能 够 创建 适合 多 种 设备 
(台式 机 ,平板 电脑 和 智能 手机 等 ) 的 网 页 。 本 章 主要 围绕 框架 、 模 板 与 CSS 布局 三 个 方 
面 的 内 容 ,着 重 讲解 它们 在 Dreamweaver 中 的 操作 方法 。 

【学 习 目 标 】 

名 了 和 解 框架 的 基本 概念 ,能 够 使 用 框架 创建 简单 网 页 ; 

名 掌握 将 某 个 页 面 保存 为 模板 的 方法 ,并 能 够 通过 模板 快速 创建 多 个 页 面 ; 

名 掌握 CSS 使 布 局 的 相关 知识 ; 

扣 能够 灵活 使 用 @media query 创建 出 适合 多 种 设备 显示 的 页 面 。 


7.1 框架 


HTML 5 已 经 据 弃 了 HTML 框架 。 最初,HTML 框架 提供 了 在 浏览 器 窗口 中 显示 
多 个 网 页 的 方式 ,但 从 目前 的 发 展 来 看 ,框架 往往 意味 着 非常 严重 的 可 访问 性 问题 , 它 难 
以 适应 搜索 引擎 和 移动 设备 。 因 此 本 节 仅 向 读者 介绍 HTML 5 中 框架 知识 保留 的 内 容 。 


7.1.1 基本 概念 


1. frame 元 素 

框架 (Frame) 是 浏览 器 窗口 中 的 一 个 区 域 ,包含 在 框架 集中 , 它 是 框架 集 的 一 部 分 ， 
每 个 框架 中 放置 一 个 网 页 内 容 , 组 合 起 来 就 是 浏览 者 看 到 的 框架 式 网 页 。 

2. iframe 元 素 

iframe 元 素 会 创建 包含 男 外 一 个 文档 的 内 联 框 架 。 虽然 HTML 5 握 弃 了 框架 ,但 并 
不 意味 着 对 框架 不 支持 。 之 所 以 iframe 元 素 能 被 HTML 5 保留 ,主要 原因 是 Web 应 用 
经 常 要 利用 一 iframe 二 实现 一 些 集 成 任务 ,例如 在 网 页 中 包含 搜索 框 和 广告 等 。 


3. frameset 元 素 
框架 集 (Frameset) 实 际 是 一 个 网 页 文件 ,用 于 定义 文档 中 框架 的 布局 和 属性 ,包括 框 
架 的 数目 \ 框 架 的 大 小 和 位 置 以 及 在 每 个 框架 中 显示 的 页 面 的 URL。 
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4. 框架 与 框架 集 的 关系 

当 设 计 人 员 准 备 使 用 多 个 框架 制作 一 个 网 页 时 ,框架 集 文档 就 是 生成 框架 本 身 的 文 
档 。 框 架 集 本 身 不 包含 要 在 浏览 器 中 显示 的 内 容 , 只 是 向 浏览 器 提供 应 该 如 何 显示 一 组 
框架 ,以 及 在 这 些 框 架 中 应 显示 哪些 文档 的 有 关 信 息 。 例 如 , 某 个 页 面 被 创建 为 两 个 框 
架 , 那 么 它 实际 包含 三 个 文件 : 一 个 框架 集 文件 ,两 个 框架 内 容 文件 。 


7.1.2 使 用 iframe 元 素 创建 框架 页 面 


iframe 提供 了 一 个 简单 的 方式 把 一 个 网 站 的 内 容 嵌 入 另 一 个 网 站 ,但 笔者 仍然 建议 
读者 谨慎 使 用 iframe 元 素 。 究 其 原因 , 当 页 面包 含 框架 元 素 后 ,iframe 在 加 载 资源 时 可 
能 用 光 所 有 的 可 用 连接 ,从 而 阻塞 主页 面 资 源 的 加 载 速度 ,给 用 户 的 感觉 就 是 网 页 非常 
慢 ,从 而 降低 用 户 的 浏览 体验 。 

iframe 元 素 的 语法 如 下 。 


< ifrane sro= "URL" width "x" height= "x" scrolling= "[OPTION]" frameborder= "x"> < /iframe> 


参数 说 明 如 下 。 
src: 文件 的 路 径 , 既 可 以 是 HTML 文件 ,也 可 以 是 文本 。 
width height: 设置 子 页 面 在 父 页 面 显示 时 的 大 小 。 
scrolling: 当 SRC 指定 的 HTML 文件 在 指定 的 区 域 显示 不 完 时 ,设置 滚动 选项 ,如 
果 设 置 为 No, 则 不 出 现 滚动 条 ;如 设置 为 Auto 则 自动 出 现 滚动 条 ;如 设置 为 Yes, 则 显示 
滚动 条 。 
frameborder: 区 域 边 框 的 宽度 , 取 值 为 0 时 ,不 显示 边框 。 
【案例 7-1】 使 用 iframe 元素 创建 框架 页 面 。 
g@ 启动 Dreamweaver CS6 ,新 建 空白 HTML 5 文档 ,并 在 其 中 插入 简单 代码 ,如 
图 7-1 所 示 ,将 该 页 面 保存 为 “7-1 iframe 元 素 ( 子 页 面 ). html”。 
@ 再 次 新 建 空白 HTML 5 文档 ,使 用 一 iframe 之 标签 将 刚才 保存 的 页 面 嵌 入 当前 页 
面 中 ,其 页 面 结构 如 图 7-2 所 示 。 
@ 将 包含 iframe 元 素 的 页 面 保 存 为 “7-1 iframe 元 素 ( 父 页 面 ). html”, 通 过 浏览 器 预 
览 即 可 看 到 效果 ,如 图 7-3 所 示 。 
D 使 用 frame7Fi x 
< 2 cl[a 


Fboay> 
|<hl id="my">hello, 我 是 子 页 面 </h1>| hel 1o, 我 是 


|</body> 


图 7-1 子 页 面 结构 


子 页 面 


body> 
<iframe src="7-1 iframe 元 素 ( 子 页 面 ) .html" id="test" width= 
"200" height="200" scrolling="no" frameborder="1"></iframe>| 
</body> 


图 7-2 父 页 面 结构 图 7-3 包含 框架 页 面 的 预览 效果 
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7.2 模板 


假如 网 站 中 包含 许多 风格 ,布局 类 似 的 页 面 , 对 于 这 类 页 面 如 果 每 个 页 面 都 逐个 制 
作 , 不 仅 浪 费 资 源 而 且 效 率 十 分 低 。 为 了 提高 网 站 建设 的 效率 ,避免 重复 操作 ,利用 
Dreamweaver CS6 中 的 模板 功能 可 以 有 效 解决 此 类 问题 。 


7.2.1 模板 是 什么 


模板 是 一 种 预先 设计 好 的 网 页 样式 ,在 制作 布局 类 似 的 页 面 时 ,只 需要 套用 这 种 模板 
就 可 以 快速 创建 另 一 个 页 面 。 

1. 模板 的 区 域 

在 模板 中 有 两 种 区 域 , 一 种 是 锁定 区 域 ,一 种 是 可 编辑 区 域 ,创建 模板 的 过 程 就 是 指 
定 和 命名 可 编辑 区 域 的 过 程 。 在 编辑 模板 时 ,设计 者 可 以 修改 模板 的 任何 编辑 区 域 和 锁 
定 区 域 , 而 当 设计 者 基于 模板 创建 另外 的 网 页 时 ,只 能 修改 那些 标记 为 可 编辑 的 区 域 ,网 
页 中 那些 被 锁定 的 区 域 是 不 可 改变 的 。 


2. 模板 的 作用 范围 
从 模板 创建 的 文档 与 该 模板 保持 链接 状态 ,因此 , 当 模板 被 用 户 修改 时 ,所 有 使 用 这 
种 模板 的 网 页 都 将 随 之 改变 ,除非 将 这 个 网 页 与 模板 进行 分 离 。 


3. 创建 模板 的 途径 

(1) 从 空白 文档 中 创建 模板 。 使 用 Dreamweaver 的 新 建功 能 可 以 直接 创建 模板 。 在 
菜单 栏 中 执行 “文件 ”>“ 新 建 " 命 令 , 打 开 “ 新 建文 档 ” 对 话 框 。 在 该 对 话 框 左 侧 ,选择 “ 空 
模板 ”选项 卡 ,并 在 “模板 类 型 "列表 中 选择 需要 的 模板 即 可 。 

(2) 从 现 有 文档 中 创建 模板 。 从 现 有 文档 中 创建 模板 是 实际 工作 中 经 常 使 用 的 处 理 
方法 ,图 7-4 所 示 的 是 某 个 网 站 的 子 页 面 ,而 图 7-5 所 示 的 页 面 是 以 图 7-4 所 示 页 面 为 模 
板 创建 的 。 

从 上 述 两 幅 图 可 以 看 出 ,使 用 模板 创建 的 页 面 ,不 但 网 页 风格 相同 ,而 且 某 些 局 部 内 
容 ( 例 如 ,页 面 头 部 导航 、 页 面 版 权 区 域 ) 也 完全 相同 ,这 样 不 仅 避免 了 重复 设计 的 麻烦 ,而 
且 提高 了 网 页 制作 的 效率 。 


7.2.2 使 用 模板 快速 创建 页 面 


下 面 以 制作 实例 的 形式 讲解 模板 从 创建 到 应 用 的 一 系列 工作 流程 ,请 读者 注意 学 习 
创建 模板 可 编辑 区 域 的 方法 ,以 及 依托 该 模板 创建 另 一 页 面 的 操作 。 

【案例 7-2】 使 用 模板 快速 创建 页 面 。 

使 用 模板 创建 网 页 大 致 分 为 四 个 阶段 , 即 前 期 准备 阶段 、 基 于 现 有 文档 创建 模板 阶 
段 、 创 建 可 编辑 区 域 阶段 、 基 于 模板 创建 新 页 面 阶段 。 为 了 更 好 地 体会 整个 过 程 , 这 里 不 
再 对 网 页 具体 的 制作 过 程 进行 讲述 。 
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DGiANT 


素 有 “ 京 震 柜 组 ”的 美称 ， 攻 位 优 英 得 天 狐 厚 。 广 接 京 兰 的 津 京 下 高 速 、I03 国 道 京 仿 再 这 ，104 加 运 距 
识字 泽 上 河 允 姑 不 超 这 10 分 名 生生 ， 划 恬 双 城 忧 (全面 反 受训 津 肘 网 、 休 亲 ， 损 乐 ， 训 等 各 栅 生 由 记 蕉 。 


全 oaianr 0 1 
字 漳 网 阅 有 阳 公 司 版 可 所 在 辐 1998-2013 


图 7-4 作为 模板 的 页 面 


由 贿 pas pera 
Ee 
ED 


开发 的 项 虽 有， 西山 和 访 、 基 水 订 加 4 区 ， 漠 革 花 压 ， 关 源 皇 ， 冯 于 坟 黄 业 大 重 ， 中 天 国际 公 写 ，P 蒜 
直 心 、 厂 州 天 马 河 、 厂 州 基 间 得 、 示 京 长 安国 际 中 心 等 - 


图 7-5 基于 模板 创建 的 页 面 
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(1) 前 期 准备 阶段 
启动 Dreamweaver CS6 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 images 文件 夹 ， 

以 及 存放 CSS 样式 文件 的 style 文件 夹 。 

@ 新 建 HTML 5 文档 ,创建 一 个 拟 作为 模板 的 页 面 page. html, 如 图 7-4 所 示 。 

(2) 基于 现 有 文档 创建 模板 阶段 

@D 打开 page. html 页 面 ,执行 “文件 ”一 
“另存 为 模板 "命令 ,打开 “另存 模板 ”对 话 框 。 

@ 在 对 话 框 中 的 “站 点 "下拉 列表 中 选择 
站 点 ,在 “另存 为 ”文本 框 中 输入 模板 名 称 
muban, 如 图 7-6 所 示 。 单 击 “ 保 存 ” 按 钮 , 即 
可 将 当前 页 面 保存 为 用 于 创建 其 他 页 面 的 
模板 。 图 7-6 “另存 模板 ”对 话 框 

此 时 ,系统 自动 在 站 点 根 文件 夹 下 创建 一 
个 名 为 Templates 的 文件 夹 ,并 将 创建 的 模板 文件 (扩展 名 为 . dwt)muban. dwt 保存 在 该 
文件 夹 下 ,如 图 7-7 所 示 。 

(3) 创建 可 编辑 区 域 阶段 

@ 当 模 板 创 建成 功 后 ,即刻 进入 模板 编辑 状态 , 即 编辑 的 是 muban. dwt 文档 。 在 该 
文档 中 ,选择 名 为 left_side 的 左 侧 导航 栏 。 

@ 执行 菜单 栏 中 的 “插入 ”一 “模板 对 象 ">“ 可 编辑 区 域 "命令 ,打开 “新 建 可 编辑 区 
域 ? 对 话 框 ,如 图 7-8 所 示 。 在 该 对 话 框 的 名称” 文本 框 中 输入 可 编辑 区 域 的 名 称 left_ 
side_nav, 单 击 “ 确 定 ” 按 钮 ,模板 中 就 建立 了 一 个 可 编辑 区 域 。 


Ew Oo ET 


BB inages 
[= :tyle 
BD Tenplates 


名 称 : [left_side_nav 


此 区 域 将 可 以 在 基于 该 模板 的 文档 
中 进行 编辑 。 


图 7-7 模板 存放 的 位 置 图 7-8 “新 建 可 编辑 区 域 " 对 话 框 


@ 同样 的 处 理 办 法 ,选择 页 面 主 内 容 区 域名 为 content_content 的 DIV 容器 ,为 该 区 
域 定义 可 编辑 区 域 , 定 义 完成 后 的 页 面 效果 如 图 7-9 所 示 。 

仔细 观察 可 以 发 现 ,图 中 可 编辑 区 域 左 上 角 均 有 淡 蓝 色 底 纹 的 标签 加 以 显示 。 如 果 
想 要 删除 某 个 可 编辑 区 域 ,只 需 在 选中 该 区 域 的 情况 下 执行 “模板 ”一 “删除 模板 标记 ” 命 


-~ 
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武 清 幸 有 “ 训 当 要 ”的 美 闲 ， 区 位 优势 租 天 柏 厚 。 却 接 训 当 的 当 蒜 启 高 款 ，103 瑟 首 东 汶 高 谴 ，104 加 省 中 高 
许 汪 上河 雅 研 下 前 这 10 分 诈 车 径 ， 瘟 据 双 城 核 心 ， 全 面 训 权 京 溃 & 刚 、 休 闲 、 恕 乐 ， 就 业 等 奇 项 领域 优势。 本 


OQ 3 1 tice rr) 
图 7-9 创建 模板 的 可 编辑 区 域 


i 
| 


令 即 可 。 

(4) 基于 模板 创建 新 页 面 阶段 

之 前 的 步骤 已 经 完整 地 创建 了 一 个 页 面 模板 ,如 何 使 用 该 模板 快速 地 创建 其 他 网 页 
呢 ? 具 体操 作 如 下 。 

Oa 在 Dreamweaver CS6 菜单 栏 中 执行 “文件 ”一 新建” 命令 ,打开 “新 建文 档 " 对 话 
框 ,选择 “空白 页 ”选项 卡 ,将 文档 类 型 设置 为 HTML 5, 然 后 选择 “模板 中 的 页 ”选项 卡 ， 
在 “站 点 "列表 中 选择 当前 站 点 下 的 模板 文件 muban, 如 图 7-10 所 示 。 单 击 “ 创 建 " 按 钮 ， 
即 可 基于 模板 创建 一 个 新 页 面 。 


站 点 。 站 点 "使用 模 析 快速 页 而 的 模板 
DD san EE Er 
Er co 
国 sk 图 从 位置 也 Br 
入 图 久 混 排 FA | 
动 字 染 5 联 -一 
Es 
| rr Ee 
| ee = 
EE ad lay 刁 
a 
因 #l 
tn [as 了 
团 当 本 rp 时 更 新 而 面 D 
rm 
hr ED 1 CE Cao 


图 7-10 ”基于 模板 新 建 网 页 


@ 通过 仔细 观察 可 以 发 现 , 在 新 建 的 页 面 右上 角 有 “模板 : muban" 文 字 标 签 ,这 表示 
当前 文档 是 基于 模板 muban 而 建立 的 。 


第 7 章 框架 、 模 板 与 CSS 3 新 增 布局 


@ 将 光标 移 至 页 面 其 他 区 域 ,光标 将 变 成 形状 ,表示 该 区 域 不 可 编辑 ;将 光标 移 至 
之 前 定义 的 可 编辑 区 域 , 则 可 以 修改 其 中 的 内 容 。 

@ 在 标 有 left_side 和 content_content 名 称 的 区 域内 快速 修改 内 容 , 即 可 完成 另外 
一 个 页 面 的 制作 ,如 图 7-11 所 示 。 需 要 注意 的 是 ,不 要 将 模板 文件 移动 到 Templates 文 
件 夹 之 外 或 者 将 任何 非 模板 文件 放 在 Templates 文件 夹 中 。 
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图 7-11 基于 muban 模板 而 创建 的 页 面 


7.2.3 模板 的 修改 


模板 创建 完成 后 ,可 以 根据 具体 情况 随时 修改 模板 的 样式 和 内 容 。 当 修改 模板 并 保 
存 后 ,Dreamweaver CS6 会 对 应 用 模板 的 所 有 网 页 进行 更 新 。 


1. 更 新 基于 模板 的 文档 

修改 模板 后 ,Dreamweaver 会 提示 用 户 更 新 基于 该 模板 的 文档 。 可 以 使 用 以 下 方法 
未 更 新 文档 。 

(1) 在 文档 编辑 窗口 中 执行 “修改 ”一 “模板 ”一 “更 新 页 面 "命令 ,打开 “更 新 页 
面 " 对 话 框 ,如 图 7-12 所 示 。 根 据 需 要 选择 更 新 站 点 的 所 有 页 面 ,还 是 只 更 新 特定 模 
板 的 页 面 。 

(2) 在 “文件 ”面板 “资源 ”选项 卡 中 , 单 击 左 侧 分 类 中 的 “模板 "按钮 ,打开 “模板 ” 面 
板 。 在 模板 上 右 击 , 在 弹出 的 菜单 中 选择 “更 新 站 点 ”, 如 图 7-13 所 示 。 在 打开 的 “更 新 页 
面 " 对 话 框 内 ,根据 需要 进行 设置 即 可 。 
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图 7-12 “更 新 页 面 " 对 话 框 图 7-13 利用 “资源 ”面板 更 新 站 点 


2. 从 模板 中 分 离 页 面 

从 模板 中 分 离 页 面 功能 可 将 当前 文档 从 模板 中 分 离 ,分 离 后 模板 中 的 文档 依然 存在 ,只 
是 原来 不 可 编辑 的 区 域 变 得 可 以 编辑 ,这 给 修改 网 页 带 来 很 大 的 方便 。 打 开 一 个 基于 模板 
创建 的 文档 ,执行 “修改 “模板 >“ 从 模板 中 分 离 ” 命 令 , 即 可 将 当前 文档 从 模板 中 分 离 。 


7.3 CSS 3 多 列 布局 


页 面 布局 是 指 将 页 面 中 的 导航 栏 \ 版 块 内 容 和 表单 等 构成 要 素 进行 统筹 安排 。 在 实 
际 工作 中 ,要 实现 类 似 杂 志 版 面 中 的 多 列 布局 ,在 CSS 2. 1 之 前 的 版 本 中 通常 使 用 浮动 和 
定位 两 种 办 法 来 解决 。 使 用 浮动 处 理 布局 时 ,虽然 使 用 较为 灵活 ,但 是 容易 发 生 错位 现 
象 ,而 且 需 要 编写 大 量 附加 代码 ;使 用 定位 处 理 布局 时 ,虽然 可 以 实现 精确 定位 ,但 是 这 种 
布局 形式 不 具有 自 适 应 能 力 , 各 个 板块 之 间 缺 乏 联动 。 

为 了 解决 上 述 困难 ,CSS 3 新 增 了 多 列 自动 布局 功能 ,利用 该 功能 可 以 自动 将 内 容 划 
分 为 指定 的 列 数 进行 排列 。 本 节 将 详细 讲解 多 列 布局 的 基本 属性 和 使 用 方法 。 


7.3.1 使 用 columns 属性 创建 多 列 布局 


在 CSS 3 中 columns 属性 是 多 列 布局 的 基本 属性 ,该 属性 可 以 同时 定义 列 数 和 每 列 
的 宽度 。 

【案例 7-3】〗】 使 用 columns 属性 创建 多 列 布局 。 

QO@ 新 建 HTML 5 文档 ,在 其 中 使 用 article 元 素 .hl 元 素 、.h2 元 素 和 pp 元素 创建 相关 
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结构 ,使 之 能 够 表现 一 篇 散文 的 结构 ,具体 结构 代码 如 图 7-14 所 示 。 

@ 在 当前 页 面 的 head 区 域 ,创建 对 应 的 CSS 规则 ,具体 代码 如 图 7-15 所 示 。 需 要 
提醒 读者 的 是 ,Internet Explorer 不 支持 columns 属性 。CSS 代码 中 在 某 个 属性 前 添加 
-webkit 前 级 ,其 目的 是 处 理 不 同 浏览 器 之 间 的 兼容 问题 ,这 里 的 -webkit-columns 是 
Chrome 浏览 器 的 私有 属性 。 


[<sEyie type="text/css"> 
arcicle { 
-webkit-columns: 200px 3; 
columns: 200px 3; 
}/* 设 置 网 页 文档 分 3 栏 显示 ， 每 栏 宽度 为 200px*/| 
hi < 
bodyS> background: #6CF; 
|<article> padding: Spx; 
<h1> 夜 雨 诗意 节选) </h1> text-align: center; 
<h2> 余 秋雨 </h2> } 


font-size: 16px; 
text-align: center; 


|p {text-indent: 2em;) 
</style> 


7-14 案例 7-3 的 页 面 结构 7-15 包含 columns 属性 的 CSS 规则 


@ 保存 当前 网 页 文档 ,通过 浏览 器 预览 后 的 效果 如 图 7-16 所 示 。 
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议 样 写 出 来 的 诗 都 是 不 值 一 访 的 。 只 有 | 


于 。 议 全 名 多 人 六 
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图 7-16 多 列 布局 预览 效果 


7.3.2 多 列 布局 的 相关 属性 
1. column-width 
column-width 属性 用 于 定义 指定 对 象 单列 显示 的 宽度 ,不 可 以 取 负 值 。 


2. column-count 


column-count 属性 用 于 定义 指定 对 象 显示 的 列 数 , 取 值 为 大 于 0 的 整数 。 


3. column-gap 


column-gap 属性 用 于 定义 列 与 列 之 间 的 宽度 ,不 可 以 取 负 值 。 


4. column-rule 


column-rule 属性 用 于 定义 每 列 之 间 边框 的 宽度 、 样 式 和 颜色 。 
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5. column-span 

column-span 属性 用 于 定义 元 素 的 跨 列 显示 。 取 值 为 1 时 , 仅 在 当前 栏 中 显示 ; 取 值 
为 all 时 ,将 横 跨 所 有 栏 进行 显示 。 

【案例 7-4】 多 列 布局 的 相关 属性 。 


@ 使 用 案例 7-3 中 的 页 面 结 构 , 进 一 步 对 CSS 规则 进行 修改 。 有 具体 修改 的 内 容 如 
图 7-17 所 示 。 


style type="text/css"> 

article { 
-webkic-column-widch: 150px;/* 设 置 每 列 宽度 */ 
-webkit-column-count: 4;/* 设 置 列 数 */ 
-webkit-column-gap: 3em;/* 设 置 列 与 列 之 间距 离 */ 
-webkit-column-rule: 1px #F63 dashed;/* 设 置 列 与 列 之 间 的 样式 */| 


background: #6CF; 

padding: Spx; 

text-align: center; 

-webkit-column-span: all;/* 设 置 标题 跨行 显示 */ 


Ih2 了 
font-size: 16px; 
text-align: center; 
-webkit-column-span: all;/* 设 置 标题 跨行 显示 */ 


text-indent: 2em; 


} 
[</style> 


图 7-17 多 列 布局 的 相关 CSS 规则 
@ 保存 当前 网 页 文档 ,通过 浏览 器 预览 后 的 效果 如 图 7-18 所 示 。 
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带 : 尘 任 务 时 b>》 地 入 其 中 并 范 。 : 
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图 7-18 “多 列 布局 的 相关 属性 ”预览 效果 
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7.4 CSS 3 弹性 盒 布 局 

在 CSS 3 中 新 增 了 box 属性 ,通过 该 属性 可 以 实现 弹性 盒 布 局 ,开发 者 可 以 轻松 创建 
自 适应 浏览 器 窗口 的 弹性 布局 。 
7.4.1 使 用 盒 布 局 


为 了 适应 弹性 盒 布 局 的 需要 ,CSS 3 新 增 了 与 box 相关 的 多 个 属性 ,借助 这 些 属性 可 
以 方便 地 控制 页 面 布局 ,具体 属性 如 表 7-1 所 示 。 


表 7-1 CSS 3 中 新 增 的 与 盒 布 局 相关 的 属性 


属 性 解 释 
box-align 定义 使 用 该 元 素 中 的 文字 、 图 像 或 子 元 素 水 平方 向 或 垂直 方向 的 对 齐 方式 
box-flex 定义 元 素 在 盒子 内 的 自 适应 尺寸 
box-ordinal-group 定义 元 素 的 显示 顺序 
box-orient 定义 元 素 的 排列 方式 
box-lines 定义 元 素 分 列 显示 
box-pack 定义 元 素 在 水 平 框 中 的 水 平 位 置 , 以 及 垂直 框 中 的 垂直 位 置 


需要 特别 说 明 的 是 ,要 使 用 弹性 盒 布局 ,用 户 需 要 将 对 象 设 置 为 盒子 显示 ,即将 对 象 
的 display 属性 值 设置 为 box。 此 外 ,为 了 兼容 Firefox、Safari 和 Chrome 浏览 器 ,开发 者 
可 以 使 用 display: -moz-box; 和 display: -webkit-box; 私 有 属性 进行 声明 。 

【案例 7-5】 使 用 盒 布 局 。 

OO 使 用 Dreamweaver CS6 创建 HTML 5 文档 ,在 其 中 创建 如 图 7-19 所 示 的 结构 代 
码 。 从 代码 结构 来 看 ,由 于 article 对 象 为 块 级 元 素 . 所 以 在 默认 状态 下 id 一 "left_ 
sidebar" 的 article 对 象 .id 一 "contents" 的 article 对 象 和 id 一 "right_sidebar" 的 article 对 
象 ,应 该 纵向 排列 。 

@ 为 了 区 分 各 个 板块 的 内 容 边界 ,以 及 展现 盒 布局 的 具体 效果 ,这 里 在 当前 页 面 的 
head 区 域 创建 对 应 的 CSS 规则 ,如 图 7-20 所 示 。 

@ 保存 当前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-21 所 示 。 

从 图 中 可 以 看 出 ,本 案例 中 由 于 对 父 级 对 象 wrapper 应 用 了 “display: -webkit-box;” 
属性 ,致使 其 子 对 象 left_sidebar contents 和 right_sidebar 在 没有 应 用 float 属性 的 情况 
下 ,实现 了 横向 排列 。 


7.4.2 弹性 盒 布局 相关 属性 详解 


7.4. 1 小 节 简 单 介绍 了 盒 布局 的 使 用 方法 ,细心 的 读者 可 以 发 现在 案例 7-5 中 ,将 
left_sidebar contents 和 right_sidebar 三 个 容器 的 宽度 都 进行 了 设 定 ,这 种 处 理 办 法 不 能 
跟随 浏览 器 宽度 的 变化 而 变化 ,如 何 解决 这 个 问题 呢 ? 
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FEsayy 
|<aiv id="wrapper"> 
<arricle id="left sidebar"> 
<h2> 左 侧 边栏 </h2> 
<ul> 
<1i><a href="#"> 文 本 导航 </a></1i>| 
<1li><a href="#"> 文 本 导航 </a></1i> 


<1li><a href="#"> 文 本 导航 </a></1i>| style type="text/css"> 
<1li><a href="#"> 文 本 导航 </a></1i> #wrapper { 
</u1> display: -webkit-box;| 
</article> display: box; 


<article id="contents"> 


}/* 将 当前 对 象 设置 为 辣子 显示 */ 
Fleft sidebar { 
background: #FCO; 
padding: Spx; 
width: 200px; 


</article> ) 
<article id="right sidebar"> #right_ sidebar { 
<h2> 右 侧 边栏 </h2> background: #39C; 
<ul> padding; Spx; 
<li><a hre: "> 文本 导航 </a></1i> width: 200px; 
<li><a hre "> 文本 导航 </a></1i> ) 
<li><a hre: "> 文本 导航 </a></1i> contents { 
<li><a "> 文本 导航 </a></1i> background: #C69; 
</ul> padding: Spx; 
</article> width: 300px; 
</div> ) 
(</body> /style> 


7-19 案例 7-5 的 页 面 结构 图 7-20 案例 7-5 的 CSS 规则 


该 对 象 没有 
使 用 float 属 性 


该 对 象 没有 
使 用 float 属 性 


图 7-21 盒 布局 预览 效果 


1. box-flex 属性 

box-flex 属性 规定 框 的 子 元 素 是 否 可 伸缩 其 尺寸 。 可 伸缩 元 素 能 够 随 着 框 的 缩小 或 
扩大 而 缩写 或 放大 ,只 要 框 中 有 和 多余 的 空间 ,可 伸缩 元 素 就 会 扩展 来 填充 这 些 空间 。 

box-flex 属性 的 值 是 一 个 整数 或 小 数 。 当 盒子 中 定义 多 个 box-flex 属性 的 子 元 素 
时 ,浏览 器 会 将 所 有 box-flex 属性 值 相 加 ,然后 根据 各 自 的 值 占 总 值 的 比例 分 配 剩余 空 
间 ,例如 盒子 A 中 包含 B 和 C 两 个 子 元 素 .其 中 B 的 box-flex 属性 值 为 1,C 的 box-flex 
属性 值 为 2, 则 说 明 B 占据 1/3 的 剩余 空间 ,C 占据 2/3 的 剩余 空间 。 
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【案例 7-6】 box-flex 属性 。 


使 用 案例 7-5 中 的 代码 结构 ,继续 完善 相关 内 容 。 

@ 在 head 区 域 的 CSS 规则 中 ,删除 id 二 "contents" 的 article 对 象 中 原来 指定 宽度 
为 300px 的 样式 代码 ,新 增 “-webkit-box-flex:1;” 代 码 。 保 存 当 前 页 面 文档 ,在 浏览 器 中 
预览 即 可 看 到 效果 ,如 图 7-22 所 示 。 


图 7-22 ”box-flex 属性 预览 效果 


2. box-ordinal-group 属性 

box-ordinal-group 属性 用 来 控制 各 个 元 素 的 显示 顺序 ,其 值 越 小 的 元 素 越 会 显示 在 
前 面 , 其 值 相同 的 多 个 元 素 ,它们 显示 的 次 序 取 决 于 原 次 序 。 

【案例 7-7】 box-ordinal-group 属性 。 

Qa 使 用 案例 7-5 中 的 代码 结构 ,继续 完善 相关 内 容 。 

@ 在 head 区 域 的 CSS 规则 中 ,分 别 为 left_sidebar、contents 和 right_sidebar 三 个 容器 
增加 “-webkit-box-ordinal-group: 3;”-webkit-box-ordinal-group: 2;” 和 “-webkit-box-ordinal- 
group: 1;” 三 个 CSS 规则。 保存 当前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-23 
所 示 。 


DD box-ordinal-group Bs ~ We 
ea 


图 7-23 ”box-ordinal-group 属性 预览 效果 


从 图 中 可 知 ,虽然 没有 改变 HTML 5 的 结构 代码 ,但 是 通过 盒 布局 的 相关 属性 ,同样 
可 以 改变 各 个 容器 显示 的 次 序 , 这 种 处 理 方法 方便 开发 者 对 布局 进行 调整 。 

3. box-orient 属性 

在 CSS 3 中 ,box-orient 属性 用 于 指定 元 素 的 排列 方向 ,设计 者 可 以 简单 地 将 多 个 元 
素 的 排列 方式 从 水 平方 向 改变 为 垂直 方向 ,或 者 垂直 方向 改变 为 水 平方 向 。 
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Ea 【案例 7-8〗】 box-orient 属性 。 
a 使 用 案例 7-5 中 的 代码 结构 ,继续 完善 相关 内 容 。 
G@ 在 head 区 域 的 CSS 规则 中 ,针对 wrapper 容器 修改 CSS 规则 ,在 其 中 增加 


“-webkit-box-orient: vertical; ”规则 。 


@ 保存 当前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-24 所 示 。 


六 boxrorient 属 性 
IC 


图 7-24 ”box-orient 属性 预览 效果 


4. box-pack 属性 与 box-align 属性 

在 使 用 盒 布 局 时 ,通常 将 box-pack 属性 与 box-align 属性 组 合 使 用 来 指定 元 素 中 文 
字 、 图 像 或 子 元 素 的 对 齐 方式 。box-pack 属性 用 于 管理 水 平方 向 上 的 空间 ,box-align 属 
性 用 于 管理 垂直 方向 上 的 空间 。 两 个 属性 的 取 值 及 其 含义 详 见 表 7-2。 


表 7-2 box-pack 属性 与 box-align 属性 的 取 值 及 其 含义 


属性 | 取 值 含义 

start 所 有 子 元 素 显 示 在 盒子 的 左 侧 ,剩余 空间 显示 在 盒子 的 右 侧 

end 所 有 子 元 素 显 示 在 盒子 的 右 侧 ,剩余 空间 显示 在 盒子 的 左 侧 

center | 剩余 空间 在 盒子 的 两 侧 平均 分 布 

justify | 剩余 空间 在 子 元 素 之 间 平 均 分 布 , 在 第 一 个 和 最 后 一 个 元 素 的 前 、 后 不 分 配 空间 


box-pack 
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属 性 | 取 值 会 义 
start 所 有 子 元 素 显 示 在 盒子 的 顶部 ,剩余 空间 显示 在 盒子 的 底部 
end 所 有 子 元 素 显示 在 盒子 的 底部 ,剩余 空间 显示 在 盒子 的 顶部 
box-align | center | 剩余 空间 在 盒子 的 上 下 两 侧 平均 分 布 
baseline | 所 有 元 素 按照 它们 的 基线 排列 
stretch | 所 有 子 元 素 高 度 被 拉 伸 ,调整 到 适合 盒子 的 高 度 


【案例 7-9】 box-pack 属性 与 box-align 属性 。 


Oa 使 用 Dreamweaver CS6 创建 HTML 5 文档 ,在 其 中 创建 如 图 7-25 所 示 的 结构 


代码 。 


Edayy 
<aiv id="box"> 
<div><img src="7-9 images/1.png" width="128" height="128"></div>| 
<div><img src="7-9 images/2.png" width="128" height="128"></div>| 


<div><img src="7-9 images/3.png" width="128" height="128"></div>| 
<div><img src="7-9 images/4.png" width="128" height="128"></div>| 


@ 在 当前 页 面 的 head 区 域 创建 对 应 的 CSS 规则 ,如 图 7-26 所 示 。 


@ 保存 当前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-27 所 示 。 此 外 ,通过 
改变 box 容器 的 box-pack 属性 与 box-align 属性 的 不 同 参数 ,还 可 以 使 其 内 部 的 子 元 素 


图 7-25 案例 7-9 的 页 面 结构 


<style type="text/c3s"> 
#box { 


border: 1px #FF0000 solid; 
display: -webkit-box;/* 定 义 该 容器 使 用 合 模 型 进行 显示 */ 
width: S80px; 
height: 400px; 
-webkit-box-pack: center; 
/* 设 置 其 子 元 素 水 平方 向 居中 对 齐 */ 
-webkit-box-align: center; 
/* 设 置 其 子 元 素 垂直 方向 居中 对 齐 */ 

} 

#box div { 
border: 1px #FF0000 solid; 
margin: Spx; 

} 


</style> 


图 7-26 设置 容器 以 盒 模型 形式 显示 


布局 产生 多 样 变化 ,如 图 7-28 和 图 7-29 所 示 。 


~ 
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图 7-27 案例 7-9 的 预览 效果 (1) 


-webkit-box-pack: start; 
-webkit-box-align: end; 


-webkit-box-pack:justify; 
-webkit-box-aligns 


图 7-29 案例 7-9 的 预览 效果 (3) 
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7.5 适合 移动 设备 的 响应 式 布局 


目前 ,移动 设备 发 展 迅 速 ,浏览 者 已 经 不 局 限于 通过 台式 机 上 网 浏览 网 页 ,平板 电脑 
和 智能 手机 是 发 展 较 快 的 移动 终端 , 越 来 越 多 的 浏览 者 通过 这 些 终 端 设备 访问 站 点 , 因 
此 ,如 何 提高 用 户 在 不 同 终端 设备 上 的 体验 是 开发 者 需要 解决 的 问题 。 


7.5.1 响应 式 布局 


随 着 现在 各 种 终端 的 快速 发 展 , 制 作出 能 够 适应 不 同 分 辩 率 .不 同 平台 、 不 同 屏幕 大 
小 的 网 页 尤为 重要 ,这 不 仅 使 得 网 站 适应 不 同 终端 的 能 力 更 强 , 同 时 也 为 用 户 带 来 了 良好 
的 体验 。 

响应 式 布局 也 可 以 称 为 响应 式 Web 设计 , 它 仅仅 是 一 个 设计 理念 ,这 个 理念 是 为 解 
决 移动 互联 网 浏览 效果 而 诞生 的 。 其 核心 思想 就 是 一 个 网 站 能 够 兼容 多 个 终端 ,而 不 是 
为 每 个 终端 做 一 个 特定 的 版 本 。 

响应 式 布局 的 优点 如 下 。 

(1) 面 对 不 同 分 辨 率 设 备 灵 活性 强 。 

(2) 能 够 快捷 解决 多 设备 显示 适应 问题 。 

响应 式 布局 的 缺点 如 下 。 

(1) 需要 对 应 多 种 设备 编写 CSS 代码 ,效率 低下 。 

(2) 代码 累 闭 ,加 载 时 间 加 长 。 

(3) 即使 使 用 了 响应 式 布 局 也 不 能 兼容 所 有 设备 ,多 方面 因素 影响 而 达 不 到 最 佳 
效果 。 

(4) 在 多 种 设备 下 看 到 的 页 面 效果 会 有 不 同 , 一 定 程度 上 改变 了 网 站 原 有 的 布局 结 
构 , 有 可 能 会 出 现 访问 者 对 网 站 的 辨识 度 不 高 的 情况 。 

响应 式 布局 虽然 有 多 种 缺点 ,但 无 法 掩盖 其 优点 一 一 让 访问 者 能 够 在 多 种 设备 环境 
下 得 到 良好 的 体验 。 

需要 特别 指出 的 是 ,设计 者 在 决定 使 用 响应 式 布局 前 ,需要 了 解 目标 人 群 的 上 网 模 
式 , 如 果 针 对 的 是 桌面 端的 人 群 ,暂时 不 要 使 用 响应 式 布局 ;如 果 针 对 的 是 移动 端的 人 群 ， 
还 是 有 必要 使 用 响应 式 布局 的 。 


7.5.2 使 用 CSS 3 的 Media Queries 实现 响应 式 布局 

在 CSS 3 中 新 增 了 Media Queries 模块 ,该 模块 允许 添加 媒体 查询 (media query) 表 
达 式 用 于 指定 媒体 类 型 ,然后 根据 不 同 的 媒体 类 型 选择 相应 的 样式 。 

1. media query 的 语法 

媒体 查询 让 CSS 可 以 更 精确 作用 于 不 同 的 媒体 类 型 和 同一 媒体 的 不 同 条 件 。 媒 体 
查询 的 大 部 分 媒体 特性 都 接受 min 和 max 用 于 表达 “大 于 或 等 于 ”和 “小 于 或 等 于 ”。 通 
过 这 个 标签 属性 ,可 以 很 方便 地 在 不 同 的 设备 下 实现 丰富 的 界面 ,具体 的 语法 如 下 。 


:人 


区 
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@media 设备 名 称 only 链 取 条 件 ) not 选取 条 件 ) and 挺 取 条 件 ), 设 备 二 {sRules} 


这 里 设备 名 称 指 的 是 CSS 中 的 设备 类 型 ,常见 的 有 以 下 内 容 。 
(1) all: 用 于 所 有 设备 类 型 。 

(2) screen: 用 于 计算 机 显示 器 。 

(3) projection: 用 于 投影 显示 ,如 幻灯 片 演示 。 

(4) handheld: 用 于 小 型 或 手持 设备 。 

(5) print: 用 于 打印 预览 模式 。 

(6) braille: 用 于 触觉 反馈 设备 。 


2. 如 何 使 用 media query 

(1) 在 一 link 过 中 使 用 @media 

用 户 可 以 通过 二 link 二 标签 中 设置 media 属性 来 添加 Media Queries 规则 。 例 如 : 

< link rel= "stylesheet" type= "text/css" media= "screen and ax- width:800pm" 

href= "style- A.css"> 

< link rel= "stylesheet" type= "text/css" media= "screan and ax- width:600pm" 

href= "style- B.css"> 

上 述 代 码 的 含义 是 , 当 设 备 显示 宽度 小 于 或 等 于 800 像素 时 ,页 面 引用 style-A. css 
样式 文件 泻 染 页 面 : 当 设备 显示 宽度 小 于 或 等 于 600 像素 时 ,页 面 引用 style-B. css 样式 
文件 浑 染 页 面 。 

(2) 在 样式 表 中 嵌入 @media 

在 样式 表 中 嵌入 @media 直接 书写 即 可 。 例 如 : 

@ media screen and (max- width:700px) { 

#oontent { 

background: red; 
} 
} 


上 述 代 码 的 含义 是 , 当 设 备 显 示 宽 度 小 于 或 等 于 700 像素 时 ,名 为 content 的 容器 背 
景色 设置 为 红色 。 

【案例 7-10】 media query。 

@ 使 用 Dreamweaver CS6 创建 HTML 5 文档 ,在 其 中 创建 如 图 7-30 所 示 的 结构 代码 。 

@ 为 适应 屏幕 ,多 数 的 移动 浏览 器 会 把 HTML 网 页 缩放 到 设备 屏幕 的 宽度 。 开 发 
者 可 以 使 用 meta 标签 的 viewport 属性 来 进一步 设置 。 在 当前 页 面 的 head 区 域内 输入 
代码 “一 meta name 一 "viewport”content 一 "width 一 device-width，initial-scale 一 1. 0" 二 ”。 
该 代码 的 作用 是 告诉 浏览 器 使 用 设备 屏幕 宽度 作为 内 容 的 宽度 ,并 且 和 忽视 初始 的 宽度 
设置 。 

@ 在 当前 页 面 的 head 区 域内 ,创建 初始 化 状态 下 页 面 的 一 般 性 规则 如 图 7-31 所 示 。 
保存 当前 页 面 文档 ,通过 浏览 器 预览 可 知 无 论 如 何 缩放 浏览 器 窗口 大 小 ,其 页 面 内 容 均 无 
变化 ,如 图 7-32 所 示 。 


Fboay> 
|<aiv id="pagewrap"> 
<div id="header"> 
<h2>header</h2> 
<p> 文 本 内 容 </p> 
</div> 
<div id="content"> 
<h2>content</h2> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
</div> 
<div id="sidebar"> 
<h2>sidebar</h2> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
</div> 
<div id="footer"> 
<h2>footer</h2> 
<p> 文 本 内 容 </p> 
</div> 
[c/aiv> 
</body> 


7-30 ”案例 7-10 的 页 面 结构 


DD) media query 


Ca 
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#pagewrap, #header, #content,| 
#sidebar, #foorer { 
padding: Spx; 
border: 1px solid red; 
margin-bottom: Spx: 
#pagewrap { 
width: 1000px; 
margin: 20px auto; 
)》 
#header { 
height: 130px; 
background: #FFO; 
} 
#content { 
width: 6€50px; 
float: left; 
} 
#sidebar { 
width: 300px; 
background: #FFO; 
float: right; 
) 
#Footer { 
clear: both; 
} 


7-31 案例 7-10 的 初始 CSS 规则 


header 
文本 内 容 


content 


文本 内 容 
文本 内 容 
文本 内 容 
文本 内 容 


footer 
文本 内 容 


图 7-32 案例 7-10 的 初始 预览 效果 


@ 为 了 能 让 浏览 器 在 缩小 的 同时 ,内 容 跟 随 窗口 大 小 自动 调整 ,需要 单独 为 其 编写 
CSS 规则 ,如 图 7-33 所 示 。 预 览 后 的 效果 如 图 7-34 所 示 。 

@ 假如 显示 宽度 一 直 减 小 ,有 可 能 损害 浏览 者 的 体验 效果 ,这 里 拟 将 页 面 布局 进行 
改变 ,以 应 对 显示 区 域 减 小 时 的 情况 。 具 体 的 CSS 规则 如 图 7-35 所 示 。 预 览 后 的 效果 如 


图 7-36 所 示 。 


本 案例 中 , 当 显 示 区 域 小 于 700 像素 时 ,将 页 面 的 侧 边栏 放置 到 主要 内 容 区 域 的 下 
方 ,页 面 布局 的 改变 使 得 浏览 者 无 论 在 桌面 端 还 是 移动 端 都 能 够 看 到 页 面 的 内 容 ,体验 效 


果 有 所 增加 。 
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/*-- 当 设备 显示 宽度 小 于 或 等 于 1004 像 素 时 ， 使 用 以 下 规则 --*/ 
Emedia screen and (max-width:1004px) { 
#pagewrap { 
width: 95%; 
}/* 设 置 宽度 为 显示 器 宽度 的 95%*/ 
#content { 
width: 65%; 
} 
#sidebar { 
width: 30%; 
} 
} 


7-33 ”显示 宽度 小 于 或 等 于 1004 像素 时 的 CSS 规则 


D media query 


< Ga 


header 


文本 内 容 


content Sidebar 


文本 内 容 文本 内 容 
文本 内 容 文本 内 容 
文本 内 容 
文本 内 容 


footer 


文本 内 容 


图 7-34 窗口 小 于 1004 像素 时 的 预览 效果 


/*-- 当 设备 显示 宽度 小 于 或 等 于 700 像 素 时 ， 使 用 以 下 规则 --*/ 
emedia screen and (max-width:700px) { 
#content { 

width: auto; 

float: none; 
}/* 设 置 容器 宽度 为 自动 ， 即 宽度 自 适 应 ， 同 时 去 除 浮动 属性 ， 各 
块 级 容器 纵向 排列 */ 
#sidebar { 

width: auto; 

float: none; 


} 
7-35 显示 宽度 小 于 或 等 于 700 像素 时 的 CSS 规则 
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content 


文本 内 容 
文本 内 容 
文本 内 容 
文本 内 容 


sidebar 


文本 内 容 
文本 内 容 


footer 
文本 内 容 


图 7-36 窗口 小 于 700 像素 时 的 预览 效果 


7.6 过 程 指导 一 一 制作 适合 多 种 设备 终端 显示 的 
响应 式 页 面 


本 节 将 从 响应 式 页 面 的 设计 构思 出 发 ,结合 相关 CSS 的 内 容 , 向 读者 详细 讲解 响应 
式 页 面 的 制作 方法 ,请 读者 着 重 体会 响应 式 页 面 在 制作 之 初 的 思维 过 程 。 


7.6.1 过 程 分 析 


本 节 的 任务 是 完成 适合 多 种 设备 终端 显示 的 响应 式 页 面 ,这 里 将 多 种 设备 范围 限制 
为 人 台式 机 桌面 显示 平板 电 脑 显示 和 手机 屏幕 显示 。 


1. 了 解 设备 分 辩 率 

在 使 用 响应 式 布局 设计 页 面 时 ,需要 提前 了 解 终 端 设备 的 显示 分 辨 率 , 目 前 主流 台 
机 桌面 显示 分 辩 率 为 1440X900 以 上 ;平板 电脑 显示 分 辩 率 为 1024X768 以 上 ;智能 手机 
显示 分 辩 率 为 480X800 以 上 。 其 实 , 在 实际 工作 中 某 个 网 页 并 不 能 适应 所 有 终端 设备 ， 
而 是 适应 常见 的 多 种 设备 而 已 。 

在 了 解 常 规 分 辨 率 以 后 ,本 案例 中 拟 将 响应 式 页 面 的 宽度 做 三 个 方面 的 划分 ,第 一 个 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


是 当 显示 分 辩 率 宽度 超过 1300 像素 时 ,页 面 适 合 在 台式 机 中 浏览 ;第 二 个 是 当 显示 分 辩 
率 大 于 600 像素 并 小 于 1300 像素 时 ,页 面 适合 在 平板 电脑 中 浏览 ;第 三 个 是 当 显 示 分 辨 
率 小 于 400 像素 时 ,页 面 适合 在 智能 手机 中 浏览 。 


2. 确定 基本 页 面 

无 论 响应 式 页 面 适合 多 少 种 设备 ,最 初 都 需要 确定 一 个 基本 页 面 布 局 , 当 基本 页 面 确 
定 完成 后 ,再 根据 不 同 设备 编写 对 应 的 CSS 规则 。 这 些 CSS 规则 并 非 将 整个 页 面 的 规则 
重新 编写 ,而 是 修改 其 中 的 一 部 分 。 

就 本 案例 而 言 , 这 里 将 在 平板 电脑 中 显示 的 页 面 布局 作为 基本 布局 开始 ,如 图 7-37 
所 示 ,布局 示意 如 图 7-38 所 示 。 待 基本 布局 完成 后 ,修改 相应 的 CSS 规则 , 即 可 得 到 台 
机 和 智能 手机 的 布局 ,如 图 7-39 一 图 7-42 所 示 。 


“为 何 HTML 5 将 主宰 在 线 视频 ?" 


按照 语义 结构 创建 视频 可 以 让 网 络 机 器 人 抓 取 任何 一 段 与 众 不 同 的 视 
频 殉 辑 ， 它 将 获得 标签 等 任何 一 段 标准 的 网 页 视频 所 具备 的 信息 ， 并 方便 
被 抓 取 ， 相 应 地 ,视频 在 搜索 结果 中 的 排名 就 会 越 来 越 高 。 

没有 采纳 HTML 5 技术 的 内 容 创 建 者 已 经 落后 , 如 果 他 们 不 实施 
HTML 5 标准 , 将 很 快 淹没 在 尘埃 里 。 好 消息 是 ， 一 些 公司 专注 发 气 
HTML 5 的 最 大 优势 , 而 又 没有 任何 技术 障碍 。 那 些 依然 兴 为 Flash 是 在 线 
视频 主流 技术 的 厂家 真 应 该 好 好 思考 了 。 


HIML 5 & CSS3 


-全 动物 - 


HTML 5 网 站 欣 党 HTML 5 网 站 欣 党 


HTML 5 网 站 欣 党 HTML 5 网 站 欣 党 HTML 5 网 站 欣 党 


Mustrations by dx words by wf. 
What remains is by wz. 


7-37 ”屏幕 宽度 在 600 像素 至 1300 像素 时 预览 效果 
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page 
inner 
mast intro 
logo 
nav main 
i 
footer 


图 7-38 布局 示意 图 (平板 电脑 ) 
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图 7-40 布局 示意 图 (台式 机 ) 
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“为 何 HTML 5 将 主 : 
语义 结 覃 建 宙 频 可 以 让 网 络 机 吴 人 折 取 任 
何 一 段 与 众 不 同 的 视频 劳 辑 。 它 将 获得 标签 等 任何 一 page 
段 标准 的 网 页 视频 所 具备 的 信息 ， 并 方便 被 抓 取 , 相 


应 地 ， 视 频 在 搜索 结果 中 的 排名 就 会 越 来 越 高 。 inner 
没有 采纳 HTML 5 技术 的 内 容 创 建 者 已 经 车 后 , 如 
果 他 们 不 实施 HTML 5 标准 , 将 很 快 淹没 在 全 埃 里 。 好 mast 
消息 是 ， 一些 公司 专注 发 所 HTML 5 的 最 大 优势, 而 又 
没有 任何 技术 障碍 。 那 些 依然 认为 Flash 是 在 线 视频 主 本 
流 技术 的 厂家 真 应 该 好 好 思考 了 。 8 
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main 
i 
HTML 5 网 站 欣 。 HTML 5 网 站 欣 。 HTML 5 网 站 欣 
党 党 党 
footer 
Mustrations by dx words by wf. 
What remains is by wz 
图 7-41 屏幕 宽度 小 于 400 像素 时 预览 效果 7-42 布局 示意 图 (智能 手机 ) 


需要 特别 指出 的 是 , 当 页 面 确定 要 使 用 响应 式 布局 实现 时 ,其 中 各 个 容器 的 宽度 不 能 
设置 为 固定 值 (如 width:200px;) ,应 该 设置 为 相对 值 (如 width:58%;)。 所 以 ,在 整体 规 
划 过 程 中 根据 上 述 3 种 布局 示意 图 ,这 里 预先 设 定 重要 板块 的 宽度 ,inner 的 宽度 为 
93.75% ;mast 的 宽度 为 32%;intro 的 宽度 为 66%;main 的 宽度 为 66%;footer 的 宽度 
为 66%。 


7.6.2 步骤 详解 


1. 创建 站 点 
(1) 启动 Dreamweaver CS6 创建 站 点 ,并 在 站 点 中 创建 用 于 放置 图 片 的 images 文件 


夹 和 放置 CSS 文件 的 style 文件 夹 。 
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(2) 创建 空白 HTML 5 文档 ,并 将 该 文档 重 命名 为 index. html。 

(3) 新 建 空白 CSS 文档, 并 将 该 文档 重 命名 为 style. css。 

(4) 将 外 部 样式 文件 style. css 链接 到 index. html 页 面 。 

(5) 在 页 面 的 head 区 域 ,插入 * 二 meta name 一 "viewport" content 一 "width 一 device- 
width，initial-scale 一 1. 0" 之 ”标签 ,用 于 告诉 终端 设备 的 浏览 器 使 用 设备 屏幕 宽度 作为 
内 容 的 宽度 ,并 且 忽视 初始 的 宽度 设置 。 


2. 平板 电脑 环境 下 左 侧 导 航 的 制作 

(1) 在 设计 视图 的 页 面 中 ,在 插入 面板 的 “常用 "类别 中 单 击 * 插 入 Div 标签 按钮 ,使 
用 软件 可 视 化 界面 插入 嵌 套 的 DIV 容器 。 读 者 也 可 以 将 光标 定位 在 代码 视图 中 手动 输 
入 相关 标签 创建 谋 套 的 DIV 容器 ,具体 的 页 面 结构 如 图 7-43 所 示 。 

(2) 切换 到 style. css 文件 中 ,创建 系列 初始 化 规则 ,如 图 7-44 和 图 7-45 所 示 。 


html, body, div, span, hi, h2, h3, h4, hs, hé, Pp, a, em, 
font, img, ins, ol, ul, 1i{ 

margin: 0; 

padding: 0; 

border: 0; 

outline: 0; 

font-size: 100%; 

vertical-align: baseline;/* 设 置 元 素 的 番 直 对 齐 方式 */ 

background: 上 ransparenc;/" 设 置 蔡 景 为 透明 */ 


》 
body 11ine-height: 1;}/* 设 置 行 高 为 1*/ 
ol，ul (list-style: none;)/* 清 除 列表 的 默认 样式 外 观 */ 
boay { 
background: #E4E4E4 urll(../images/bg.png); 
color: rgba (0，0，0，0.82) ;/* 设 置 字体 颜色 和 透明 度 */ 
boday> font: normal 100% "微软 雅 黑 "; 
<aiv id="page"> -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); 
<div class="inner"> ~webkit-text-shadow: 0 ipx 0 rgba(255, 255, 255, 0.8);| 
<div class="mast"></div> text-shadow: 0 lpx 0 rgba(255, 255, 255, 0.8); 
/* 设 置 页 面 所 有 文字 均 有 阴影 效果 */ 


-webkit-text-size-adjust: none: 


7-44 初始 化 页 面 规则 (1) 


color: #890101; 
text-decoration: none; 
-moz-transition: 0.23 color linear; 
-webkit-transition: 0.23 Color linear; 
transition: 0.2s color linear; 

}/* 设 置 超 树 接 颜色 和 过 渡 效 果 */ 

a:hover {color: #DF3030;} 

p {text-indent: 2em;)} 

/* 设 置 段落 缩 进 2 个 汉字 的 距离 */ 

.inner { 
margin: 0 auto; 
width: 93.75$; 

}/* 设 置 页 面 核心 区 域 居中 ， 宽 度 为 93 .75%*/ 

#page { 
background; urll(../images/rag.png) repeat-x; 
padding: 2em 0; 


} 


img {max-width: 100%;} 
|/* 设 置 图 像 元 素 最 大 宽度 为 原始 尺寸 的 100%*/ 
-mast { 

float: left; 

Width: 32%; 


图 7-45 初始 化 页 面 规 则 (2) 
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(3) 在 应 用 mast 类 的 DIV 容器 内 部 使 用 hl 元 素 创建 标题 ,使 用 ul 元 素 创 建 导航 列 
表 。 将 hl 元 素 命 名 为 logo, 并 插入 图 像 ,将 ul 元 素 应 用 nav 类 ,此 时 的 页 面 结构 如 图 7-46 
所 示 。 


div id="page"> 
<div class="inner"> 
<div class="mast"> 


<h1 id="logo"><a href="#"><img src="images/1l0go.png"></a></h1 
<ul class="nav"> 

<li><a href="#">HTML 5 共享 c/a></1i> 

<1li><a href="#">HTML 5 资讯 c/a></1i> 

<1i><a href="#">HTML 5 教程 </a></1i> 

<1li><a href="#">HITML 5 资源 </a></1i> 

<1li><a href="#">HTML 5 模板 </a></1i> 


图 7-46 创建 左 侧 导 航 


(4) 切换 到 style. css 文件 中 ,创建 与 列表 相关 的 CSS 规则 ,如 图 7-47 所 示 。 需 要 说 
明 的 是 ,nav 类 中 的 宽度 设置 为 65% ,该 数字 指 的 是 宽度 设置 为 父 一 级 容器 宽度 的 65%， 
由 于 应 用 nav 类 的 ul 元 素 父 一 级 元 素 为 mast 元 素 , 所 以 该 元 素 的 实际 宽度 等 于 “屏幕 宽 
度 " 乘 以 32% 再 乘 以 65%。 通 过 浏览 器 预览 后 的 效果 如 图 7-48 所 示 。 


595 1 
background: 

|ur1 (. ./images/1ogo-bg.png) no-repeat 

So% 0; 


#1logo a ( 
Padding-top; 117px; 
height: 162px; 
display: block: 
text-align: center; 


ul.nav { HTML 5 共享 
mrgin: 2em auto 0; | 
: ;/* 帘 | “一 级 宽 | 和 
\ width: 65%;/* 宽 度 为 父 一 级 宽度 的 65%*/ HTML 5 资讯 
ul.nav al{ I 
font: bold 16px/1.2 "微软 雅 黑 "; HTML 5 教程 
display: block; 2 
text-align: center; HTML 5 资源 
padding: lem 0.5em lem; 
border-bottom: ipx #333333 dashed;| | 
) HTML 5 模板 
ul,nav a:hover fcolor: #F002) | 
图 7-47 左 侧 导 航 对 应 CSS 规则 图 7-48 左 侧 导 航 预 览 效 果 


3. 平板 电脑 环境 下 右 侧 内 容 的 制作 

(1) 将 光标 定位 在 拆 分 视图 的 代码 视窗 内 ,手动 插入 多 个 DIV 容器 ,具体 结构 如 
图 7-49 所 示 。 需 要 说 明 的 是 ,二 div class 一 "section intro" 二 一 /div 过 的 含义 指 该 DIV 容 
器 同时 应 用 section 类 和 intro 类 规则 。 

(2) 根据 页 面 内 容 的 需要 在 第 一 个 DIV 容器 内 部 插入 标题 和 段落 文字 ,具体 的 页 面 
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结构 如 图 7-50 所 示 。 
(3) 切换 到 style. css 文件 中 ,创建 相关 的 CSS 规则 ,如 图 7-51 所 示 。 通 过 浏览 器 预 
览 后 的 效果 如 图 7-52 所 示 。 


body> 
<div id="page"> 
<div class="inner"> 


section:artte: av:after { 


</div> content: ". 
<div class="section intro"></div> display: block; 
<div class="section main"></div> height: 0; 
<div class="footer"></div> clear: borh; 
</div> Visibility: hidden; 
</div> ) V* 使 用 伪 类 的 方式 清除 某 个 对 象 的 浮动 属性 */ 
</body> -intro, .main, .foorer { 


float: righ 


7-49 ”创建 页 面 右 侧 内 容 的 结构 代码 ey 


of 
margin-top: 117px; 


div Class="aection Intro™y } 
<div> ,intro div { 


<h2y>|” HIML </h2> line-height: ; 
<p> </p> ) /* 设 置 行 高 为 1 .4 信行 高 */ 
<p>| HTM. /p> "intro h2 { 
</div> font: normal 2em "微软 雅 黑 "; 
</div> text-align: center; 
<div class="section main"></div>| margin-bottom: 0.25em; 


<div class="footer"></div> b 


图 7-50 丰富 应 用 intro 类 容器 的 内 容 图 7-51 应 用 intro 类 容器 的 CSS 规则 


“为 何 HTML5 将 主宰 在 线 视频 ?” 


控 巾 次 义 结构 创建 视频 可 以 让 网 络 机 轩 人 抓 取 任何 一 息 与 众 不 同 的 
视频 英 辑 。 它 将 获得 标签 等 任何 一 段 标准 的 网 页 视频 所 具 各 的 信息 ， 并 
方便 被 抓 取 ， 相 应 地 ， 视 频 在 按 索 结果 中 的 排名 就 会 越 末 越 高 。 

没有 采纳 HTMIL5 技 术 的 内 容 创建 者 已 经 售后 ， 如 果 他 们 下 实施 


HTML5 标 准 , 持 很 快 淹没 在 生 埃 至 。 好 汇 息 是 ， 一些 公司 专注 发 据 
HTML5 的 晤 大 优势 ， 而 又 没有 任何 技术 险 碍 ， 那 些 依然 认为 Flash 是 在 续 
视频 主流 技术 的 厂 守 真 应 该 好 好 和 思考 了 。 


7-52 平板 电脑 环境 下 的 预览 效果 


(4) 在 应 用 main 类 的 DIV 容器 内 部 ,创建 标题 和 有 序列 表 并 插入 图 像 ,此 时 的 页 面 
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结构 如 图 7-53 所 示 。 


Fav class="section main™y 
<h2>HTML S&amp:C55 3</h2> 


<ol> 
<11 class="figure"> src="images/01.jpg"> 
< src="images/02. 
< src="images/03- 
< src="images/04- 
< 
< 

</ol> 


/aiv> 


<span>HTML 5 网 站 欣赏 </span> </a> </1i> 
<span>8TML 5 网 站 欣赏 </span> </a> </11>| 
<span>HTML 5 网 站 欣赏 </span> </a> </1i> 
<span>HTML 5 网 站 欣赏 </span> </a> </1i>| 
<span>HTML 5 网 站 欣赏 </spany> </a> </1i> 
<span>HTML 5 网 站 欣赏 </spany> </a> </1i> 


图 7-53 使 用 有 序列 表 作 为 容器 制作 图 文 信息 列表 


(5) 切换 到 style. css 文件 中 ,创建 相关 的 CSS 规则 ,如 图 7-54 所 示 。 通 过 浏览 器 预 


览 后 的 效果 如 图 7-55 所 示 。 


-main nh2 1 
font-size: 1.4em; 
text-align: center; 
margin: 0.75em 0 lem; 

) 

.figure { 
float: left; 
font-size: 14px; 
line-height: 1.1; 
margin: 0 3.1% 1.5em 0; 
text-align: center; 


以 实现 图 像 随 窗 口 大 小 变化 而 自动 变化 */ 
text-transform: uppercase; 
letter-spacing: 0.05em; 

) 

,figure img { 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
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HTML 5 网 站 欣 堂 HTML 5 网 站 欣 堂 


-webkic-box-shadow: 0 2px 4px rgba(0, 
-moz-box-shadow; 0 2px 4px rgba(0, 0, 
box-shadow: 0 2px 4px rgba(0, 0, 0, 
display: block; 

margin: 0 auto lem; 


}/* 设 置 图 像 的 圆 角 边框 ， 以 及 图 像 四 周 的 阴影 效果 */ 


widch; 30%; /* 这 里 的 宽度 不 是 固定 值 ，, 而 是 相对 值 , 可 


0, 0, 0.5); 
0, 0.5); 


0.5); 
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HTML 5 网 站 欣 堂 


3 


HTML 5 网 站 欣 尝 


HTML 5 网 站 欣 尝 HTML 5 网 站 欣 尝 
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(6) 在 应 用 footer 类 的 DIV 容器 内 部 ,插入 与 版 权 相 关 的 文字 内 容 ,具体 结构 如 
图 7-56 所 示 。 切 换 到 style. css 文件 中 ,创建 相关 的 CSS 规则 ,如 图 7-57 所 示 。 至 此 , 适 
合 平板 电脑 的 基本 页 面 布 局 已 经 全 部 完成 。 


div class="footer"> 
<p>Illustrations by <a href="#">dx</a>, words by <a href="#">wf</a>.</p>| 


<p>Whar remains is by <a href="#">wyz¢/a>.</p> 
</div> 


7-56 ”版 权 部 分 的 页 面 结构 


4. 使 用 @media query 编写 显示 宽度 大 于 1300 像素 时 的 CSS 规则 
(1) 根据 预先 绘制 完成 的 布局 示意 图 ,设置 某 个 容器 的 具体 位 置 。 
(2) 切换 到 style. css 文件 中 ,创建 如 下 规则 。 


@media screen and min- width:1300px) { 具体 规则 要 书写 在 此 大 括号 内 } 
(3) 在 @media query 语句 结构 内 创建 相应 的 CSS 规则 ,如 图 7-58 所 示 。 


Bmedia screen and (min-width:1300px) { 
.mast { 
float: none; 
width: auto: 


#logo { 
float: left; 
width: 32%; 


.nav { 
float: right; 
margin: 40px 0 lem; 
text-align: center; 
width: 66%; 
}/* 设 置 导航 右 便 浮动 ， 宽 度 与 基本 布局 页 面 


"footer { 

background: 
url(../images/ornament .png) 
50% 0 repeat-x; 

font-size: 12px; 

text-align: center; 


中 其 余 右 侧 容器 的 宽度 相同 */ 
‘nav 1i { 

float: left; 
margin-right; 3.3%; 


Width: 16%; 
)V* 设 置 构 向 导航 的 宽度 与 间隔 距离 */ 


.intro {margin-top: lem;} 
figure { 
margin-right: 2.5%; 


padding: 40px 0 20px; 
) 


,foocer p { 
margin-bottom: 0.Sem; 


Width: 14¥; 
)/* 设 置 图 文 信息 列表 中 图 像 的 宽度 和 间隔 距离 */ 
: D 


图 7-57 与 版 权 部 分 相关 的 CSS 规则 图 7-58 显示 宽度 大 于 1300 像素 时 的 CSS 规则 


(4) 在 创建 过 程 中 ,用 户 可 以 通过 Dreamweaver CS6 窗口 下 方 的 “窗口 大 小 ”调整 当 

前 预览 区 域 的 显示 状态 ,如 图 7-59 所 示 。 保 存 当 前 页 面 ,通过 浏览 器 预览 后 即 可 看 到 
效果 。 

5. 使 用 @media query 编写 显示 宽度 小 于 600 像素 时 的 CSS 规则 

根据 预先 绘制 完成 的 布局 示意 图 ,切换 到 style. css 文件 中 ,创建 显示 宽度 小 于 600 像素 
时 的 CSS 规则 ,如 图 7-60 所 示 。 通 过 浏览 器 预览 后 即 可 看 到 效果 。 

至 此 ,当前 案例 适合 多 种 设备 显示 的 响应 式 页 面 布 局 已 经 制作 完成 。 此 外 ,读者 还 可 
以 向 CSS 规则 中 添加 多 种 显示 宽度 不 同 状态 下 的 CSS 规则 ,这 里 不 再 袭 述 。 
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240 x 320 ”功能 手机 
320x 480 智 论 手机 
800 ”智能 手机 


768 x 1024 。 手板 电脑 
1000 x 620 ”(1024 x768 , 最 大 化 ) 
1260x 875 。 (1280 x 1024 , 最 大 化 ) 
1420x 750 。 (1440 x 900 ,最 大 化 
1580 x 1050 。 (1600 x 1200 , 最 大 化 ) 
全 大 小 
编辑 大 小 … 

Y ”方向 横向 
方向 纵向 


V screen and (min-width:1300px) 人 
"dim vv 回国 WTR 


7-59 调整 预览 状态 


media screen and (max-width:600px) { 
-mast, .intro, .main, .footer { 

float: none; 

width: auto; 
}/* 清 除 所 有 重要 板块 的 浮动 属性 ， 使 其 重 直 排列 */ 
#1ogo { 

background: none; 
)/* 由 于 智能 手机 显示 区 域 有 限 ， 这 里 不 再 显示 装饰 性 图 像 */ 
#logo a { 

padding-top: 20px; 

height: 80px; 

display: block; 
al .nav < 

margin: 0 auto; 

width: 100%; 
hl.nav 11 { 

float: left; 

margin-right: 3%; 

width: 17%; 
》 
al .nav a { 

fonc: 14px “微软 雅思 "; 

font-weight: bold; 
; 
,intro {margin-top: 10px;} 
“intro h2 {font-size: 1.4em;} 


} 
图 7-60 显示 宽度 小 于 600 像素 时 的 CSS 规则 


7.7 自主 任务 一 一 制作 简单 响应 式 页 面 


根据 7.6 节 的 案例 制作 ,读者 应 该 了 解 和 掌握 创建 响应 式 页 面 的 基本 流程 ,通过 本 节 
实 训 的 训练 ,可 以 进一步 掌握 响应 式 布局 页 面 的 方法 ,页 面 最 终 效果 如 图 7-61 和 图 7-62 
所 示 。 
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The art & science of app creation 


The art & science of app creation 


At Create Digital Media we make beautiful apps for iPhone, 
ipad and Android. It's a fine balance between art and science. 


HTML5 & CSS3 HIML5&CSS3 HTML5 & CSS 3 


WE'RE BASED IN THE WE'RE BASED IN THE WE'RE BASED IN THE 
BEAUTIFUL TOWN OF BEAUTIFUL TOWN OF BEAUTIFUL TOWN OF 
TUNBRIDGE WELLS 1N TUNBRIDGE WELLS IN TUNBRIDGE WELLS IN 

KENT, ENGLAND WHERE KENT, ENGLAND WHERE KENT, ENGLAND WHERE 
WE DESIGN APPS FOR WE DESIGN APPS FOR WE DESIGN APPS FOR 

AMAZING CLIENTS AMAZING CLIENTS AMAZING CLIENTS 
WORLDWIDE. WORLDWIDE. WORLDWIDE. 


® Copyright © 2016.wyz All rights reserved. 


图 7-61 显示 宽度 大 于 600 像素 时 预览 效果 图 7-62 显示 宽度 小 于 600 像 
素 时 预览 效果 


7.8 习题 


1. 什么 是 iframe 元 素 ? 
2. 制作 网 页 中 ,模板 的 作用 是 什么 ? 如 果 修 改 模板 中 的 内 容 ,其 他 页 面 会 自动 更 


3. 如 何 将 一 个 已 经 完成 的 网 页 创建 为 模板 ? 

4. 在 CSS 3 中 ,如 果 想 创建 多 列 布局 ,需要 使 用 哪个 属性 来 完成 ? 

5. 如果 对 某 个 容器 使 用 display: -webkit-box; 属 性 , 则 该 容器 内 部 的 子 对 象 将 会 有 
何 变 化 ? 

6. 在 使 用 盒 布 局 时 ,通常 将 哪 两 个 属性 组 合 使 用 来 指定 元 素 中 文字 、 图 像 或 子 元 素 
的 对 齐 方式 ? 

7. 什么 是 响应 式 布局 ? 在 什么 情况 下 使 用 响应 式 布 局 ? 

8. 在 响应 式 页 面 的 head 区 域 通常 出 现 如 下 的 代码 。 


<meta name= "viewport" content= "width= device- width，initial- scale=1, maximm- scale=1"/> 


该 代码 的 含义 是 什么 ? 
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行为 与 Spry 构件 


【本 章 导读 】 

行为 能 够 帮助 不 熟悉 编程 的 设计 者 快速 插入 JavaScript 程序 ;Spry 构件 能 够 方便 地 
制作 出 多 级 菜单 栏 、 选 项 卡 式 面板 等 内 容 。 本 章 将 详细 讲解 它们 在 工作 中 的 使 用 方法 。 

【学 习 目 标 】 

名 了 解 行为 的 基本 概念 ,掌握 常见 行为 的 使 用 方法 ; 

避 熟悉 Spry 构件 的 相关 知识 ,掌握 插入 Spry 构件 的 基本 方法 。 


8.1 行为 


行为 其 实 就 是 标准 的 JavaScript 程序 。 在 Dreamweaver CS6 中 提供 了 很 多 行为 动 
作 ,每 个 动作 可 以 完成 特定 的 任务 ,设计 者 只 要 在 这 些 特 定 的 功能 动作 中 选择 需要 的 行 
为 ,不仅 可 以 实现 网 页 特效 ,还 不 需要 自己 编写 JavaScript 程序 , 极 大 地 方便 了 不 熟悉 编 
程 的 设计 者 。 


8.1.1 事件 与 动作 相关 概念 


行为 是 动作 和 触发 该 动作 的 事件 的 结合 体 。 要 想 在 页 面 中 添加 行为 ,需要 首先 制定 
一 个 动作 ,然后 再 制定 触发 该 动作 的 事件 ,这样 才能 将 行为 添加 到 页 面 中 。 

1. 事件 

事件 是 触发 动态 效果 的 原因 , 它 可 以 被 附加 到 各 种 页 面 元 素 上 ,也 可 以 被 附加 到 
XHTML 标记 中 。 与 鼠标 相关 的 3 个 常见 事件 是 onClick 事件 ,onMouseOver 事件 和 
onMouseOut 事件 ,不 同 浏览 器 支持 的 事件 种 类 和 数量 不 同 ,通常 较 高 版 本 的 浏览 器 能 够 
支持 更 多 的 事件 。 


2. 动作 

动作 是 一 段 预 先 编写 的 JavaScript 代码 ,是 最 终 需 要 完成 的 动态 效果 。 例 如 ,打开 浏 
览 器 窗口 ,弹出 窗口 .交换 图 像 等 都 是 动作 。 在 Dreamweaver CS6 中 使 用 内 置 行为 ,系统 
会 自动 的 向 页 面 添 加 JavaScript 代码 ,对 于 不 太 熟 悉 JavaScript 的 设计 人 员 非 常 适合 。 


3. 事件 与 动作 之 间 的 关系 
在 将 行为 附加 到 某 个 页 面 元 素 之 后 ,每 当 该 元 素 的 某 个 事件 发 生 时 ,浏览 器 即 会 调用 
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与 这 一 事件 关联 的 动作 (JavaScript 代码 )。 例 如 ,将 onMouseOver 事件 与 一 段 
JavaScript 代码 相关 联 , 当 鼠标 指针 指向 页 面 元 素 上 时 ,就 可 以 执行 相应 的 JavaScript 代 
码 ( 动 作 ) 。 一 个 事件 可 以 触发 多 个 动作 ,读者 还 可 以 在 官方 网 站 获取 更 多 的 行为 。 
8.1.2 行为 面板 

在 Dreamweaver CS6 中 ,执行 “窗口 ”>“ 行 为 ”命令 ,或 者 按 Shift 十 F4 键 , 即 可 打开 
“行为 ”面板 ,如 图 8-1 所 示 。 行为 面板 包含 以 下 选项 。 

(1) 显示 设置 事件 国 ]: 仅 显示 附加 到 当前 文档 中 的 事 
件 ,每 个 类 别 的 事件 都 包含 在 可 折 释 的 列表 中 ,如 图 8-2 
所 示 。 

(2) 显示 所 有 事件 国 ]: 按 字 母 顺序 显示 属于 特定 类 别 的 
所 有 事件 。 

(3) 添加 行为 [#j: 显示 行为 菜单 ,如 图 8-3 所 示 , 其 中 包 
含 可 以 附加 到 当前 选 定 元 素 的 动作 。 当 从 该 列表 中 选择 一 个 
动作 时 ,将 出 现 一 个 对 话 框 ,用 户 可 以 在 对 话 框 中 指定 该 动作 
的 参数 。 如 果菜 单 上 的 所 有 动作 都 处 于 灰色 禁用 状态 , 则 表 


时 图 8-1 “行为 "面板 
示 选 定 的 元 素 无 法 生成 任何 事件 。 
标 符 检 香 器 
EC 
增 大 /收缩 
挤 压 
显示 / 尚 隐 
异动 
滑动 
追 窑 
高 亮 颜 色 
图 8-2 显示 设置 事件 图 8-3 ”添加 行为 菜单 


(4) 删除 事件 车 : 从 行为 列表 中 删除 所 选 的 事件 和 动作 。 
(5) 向 上 箭头 国 和 向 下 稍 头 局 : 在 行为 列表 中 上 下 移动 特定 事件 的 选 定 动作 。 对 
于 不 能 在 列表 中 上 下 移动 的 动作 ,箭头 按钮 将 处 于 禁用 状态 。 
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8.1.3 “弹出 信息 ”行为 


使 用 “弹出 信息 ”行为 将 显示 一 个 包含 指定 消息 的 JavaScript 警告 窗口 ,该 警告 窗口 
包含 JavaScript 警告 和 一 个 “确定 ”按钮 。 使 用 此 行为 只 能 提供 信息 ,而 不 能 为 用 户 提供 
选择 。 弹 出 信息 一 般 有 两 种 形式 : 一 种 是 打开 网 页 后 自动 弹出 信息 对 话 框 ; 另 一 种 是 通 
过 单 击 某 个 对 象 弹 出 对 话 框 。 

【案例 8-1】 添加 弹出 信息 行为 。 

O 启动 Dreamweaver CS6 ,打开 一 个 编辑 完成 的 页 面 。 

@ 若 要 给 某 个 对 象 添加 “弹出 消息 ”行为 , 则 应 选中 这 个 对 象 ; 若 要 给 网 页 添加 “弹出 
消息 ”行为 , 则 应 选中 整个 页 面 。 这 里 选择 整个 页 面 ,为 整个 页 面 添 加 行为 。 

@ 选择 整个 二 body 二 标签 后 , 单 击 行为 面板 中 的 [4#J 按 钮 ,在 弹出 下 拉 菜 单 中 选择 
“弹出 信息 ”选项 ,此 时 弹出 “弹出 信息 ”对 话 框 。 

@ 在 此 对 话 框 中 ,输入 弹出 信息 的 文本 内 容 , 如 图 8-4 所 示 。 单 击 “ 确 定 ” 按 钮 ,这 时 
在 行为 面板 中 会 自动 添加 一 个 onLoad 事件 。 此 外 ,根据 实际 需要 还 可 以 在 事件 选择 下 
拉 列 表 中 选择 其 他 事件 ,如 图 8-5 所 示 。 


标 答 检 埋 器 
[5 oe 


消息- 欢 三 光 司 宇 驿 电子 竞技 平台 ! 


onlinload 


图 8-4 “弹出 信息 ”对 话 框 图 8-5 选择 其 他 事件 


@ 执行 “文件 ”保存 "命令 ,保存 当前 页 面 . 按 F12 键 预览 网 页 。 当 浏览 器 载 人 页 
面 时 ,即刻 弹出 刚才 制作 的 对 话 框 , 如 图 8-6 所 示 。 


区 -大 
酒 动 只 为 您 的 电 葛 需求 


6 Fu -6 


图 8-6 ”应 用 弹出 信息 行为 效果 


第 8 章 行为 与 Spry 构件 


8.1.4 “打开 浏览 器 窗口 ”行为 


使 用 “打开 浏览 器 窗口 "行为 可 以 在 一 个 新 的 窗口 中 打开 其 他 URL, 还 可 以 指定 新 窗 
口 的 属性 、 特 性 和 名 称 。 这 里 以 制作 一 个 随 主页 打开 而 自动 打开 的 广告 窗口 页 面 为 例 ,向 
读者 讲解 这 个 行为 的 使 用 方法 。 

【案例 8-2】 添加 打开 浏览 器 窗口 行为 。 

| 启动 Dreamweaver CS6 ,创建 HTML 5 文档 ,在 页 面 中 创建 一 个 DIV 容器 ,并 在 
其 中 插入 一 幅 图 像 ,然后 将 其 保存 为 tanchuang. html, 作 为 后 面 使 用 的 弹出 的 广告 
窗口 。 

@ 再 创建 一 个 空白 页 面 ,输入 相关 内 容 , 作 为 站 点 主页 保存 为 index. html。 

@ 在 index. html 页 面 中 ,选择 整个 二 body 之 标签 中 的 内 容 , 即 选中 整个 页 面 主体 。 
然后 单 击 行为 面板 中 的 [区 按钮 ,在 弹出 下 拉 菜 单 中 选择 “打开 浏 览 器 窗口 ”, 这 时 弹出 “ 打 
开 浏览 器 窗口 ?对 话 框 。 

@ 在 “打开 浏览 器 窗口 ?对 话 框 中 , 单 击 * 浏 览 ? 按 钮 ,在 弹出 对 话 框 内 选择 刚才 创建 
的 广告 窗口 页 面 tanchuang. html。 根 据 需 要 设置 窗口 宽度 和 高 度 ,选中 必要 属性 , 如 
图 8-7 所 示 。 

@ 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 ,此 时 在 行为 面板 中 会 自动 添加 一 个 页 面 加 载 的 
onLoad 事件 ,如 图 8-8 所 示 。 


要 显示 的 URL tanchuang. htnl ET 
窗口 宽度 - 窗口 高 度 - 
局 性 加 号 航 工具 栏 可 单条 
地 址 工具 栏 是 要 时 使 用 闲 动 第 
状态 栏 调整 大 小 手柄 
入 口 名 称 。 广告 窗口 ] 
图 8-7 “打开 浏览 器 窗口 ?对 话 框 8-8 当前 行为 面板 


@ 保存 当前 文档 ,使 用 浏览 器 预览 。 当 打开 主页 时 ,广告 窗口 会 在 浏览 器 窗口 随 着 
主页 的 打开 而 打开 ,如 图 8-9 所 示 。 


8.1.5 “改变 属性 ”行为 


“改变 属性 ”行为 可 改变 对 象 某 个 属性 的 值 ,例如 DIV 容器 的 背景 颜色 或 表单 的 某 个 
动作 。 这 里 运用 ”改变 属性 ?行为 制作 鼠标 悬 停 位 置 下 DIV 容器 变换 颜色 的 实例 。 

【案例 8-3】 添加 改变 属性 行为 。 

@ 启动 Dreamweaver CS6, 创 建 HTML 5 文档 ,在 页 面 中 创建 名 为 wrapper 的 DIV 
容器 ,并 在 其 中 插入 一 组 DIV 容器 ,此 时 页 面 结构 如 图 8-10 所 示 。 


- 
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局 无 标 要 文档 


Et] 


这 里 是 网 站 主页 ， 由 于 添加 了 “打开 浏览 器 窗口 行为 ” ， 所 以 当 此 页 面 被 加 
载 时 会 有 弹 窗 出 现 。 


8-9 打开 浏览 器 窗口 行为 预览 效果 


<body> 

<div id="wrapper"> 
<div id="box 1" 
<div id="box 2" 
<div id="box_ 3" 
<div id="box 4" 
<div id="box 5" 
<div id="box 6" 

</div> 

</body> 


class="box">box_1</div> 
class="box">box 2</div> 
class="box">box_3</div> 
class="box">box 4</div> 
class="box">box 5</div> 
class="box">box 6</div> 


8-10 案 


例 8-3 的 页 面 结构 


@ 在 页 面 顶部 的 head 区 域 ,编写 对 应 的 CSS 规则 ,如 图 8-11 所 示 。 保 存 当 前 页 面 ， 


通过 浏览 器 预览 可 以 看 到 效果 ,如 图 8-12 


<style type="text/css"> 
#wrapper 1{ 
width:321px; 
height:220px; 
padding:5px 0 0 Spx; 
border:1lpx #666 dotted; 


} 
-box { 
width:100px; 
height:100px; 
border:1px #333 solid; 
float:left; 
margin:0 5PX Spx 0; 
text-align:center; 
line-height:100px; 
} 
</style> 


8-11 案例 8-3 的 CSS 规则 


所 示 。 


图 8-12 ”页面 预览 效果 
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@ 在 设计 视图 中 ,选择 名 为 box_1 的 DIV 容器 ,然后 单 击 行为 面板 中 的 [J 按钮 ,在 
弹出 下 拉 菜 单 中 选择 “改变 属性 ”选项 ,这 时 弹出 “改变 属性 ”对 话 框 。 

@ 在 此 对 话 框 的 “元 素 类 型 "下 拉 列 表 框 中 选择 DIV 选项 ,在 “元 素 ID” 下 拉 列 表 框 
中 选择 DIV "box_1" 选 项 ,在 “属性 "下拉 列 表 框 中 选择 backgroundColor 选项 ,在 “新 的 
值 "文本 框 中 输入 #FFCC33, 如 图 8-13 所 示 。 单 击 “ 确 定 ” 按 钮 ,在 行为 面板 中 会 自动 添 
加 一 个 onFocus 事件 。 最 后 在 事件 选择 下 拉 列 表 框 中 将 onFocus 事件 修改 为 
onMouseOver 事件 ,如 图 8-14 所 示 。 


标签 检查 器 
ml [| 


元 来 类型- 
元 素 ID: (DIV box-l ee" | 
后 全 加 兴 
OO | 
新 的 值 : #FFCC33 


图 8-13 “改变 属性 ?对 话 框 图 8-14 改变 事件 


@ 由 于 此 时 仅 添 加 了 onMouseOver 事件 ,在 预览 时 可 以 发 现 , 虽 然 鼠 标 悬 停 时 box_1 
容器 的 背景 颜色 已 经 改变 ,但 光标 移出 该 容器 时 ,颜色 并 未 还 原 , 所 以 还 需要 再 添加 
onMouseOut 事件 ,如 图 8-15 所 示 。 

@ 重复 步 又 四 一 加 的 操作 ,将 其 他 DIV 容器 进行 类 似 设置 。 保 存 当 前 页 面 ,通过 浏 
览 器 预览 可 以 发 现 , 当 鼠 标 悬 停 在 某 个 DIV 容器 内 部 时 ,背景 颜色 进行 改变 ,而 当 光 标 移 
出 DIV 容器 时 ,背景 颜色 又 恢复 为 原来 的 颜色 ,如 图 8-16 所 示 。 


标签 检查 器 
| 属性 | 行为 ] 标签 “Hiv> 


图 8-15 ”添加 onMouseOut 事件 图 8-16 “添加 改变 属性 行为 "最终 预览 效果 


最 后 需要 说 明 的 是 ,利用 行为 能 够 实现 的 某 些 效果 ,使 用 其 他 方法 同样 能 够 实现 , 例 
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如 本 例 中 使 用 “改变 属性 ”行为 改变 容器 背景 颜色 ,而 在 实际 工作 中 完全 可 以 使 用 CSS 样 
式 中 的 伪 类 代 蔡 。 所 以 读者 需要 观察 应 用 的 环境 ,以 及 实现 的 难 易 程 度 决 定 使 用 何 种 方 
法 。 此 外 ,可 以 通过 官方 网 站 获取 更 多 的 行为 ,方便 设计 者 根据 实际 需要 进行 使 用 。 


8.2 Spry 构件 


Spry 构件 其 实 是 一 种 Ajax 框架 ,该 框架 是 由 各 组 织 结构 开发 的 用 于 更 好 地 进行 
Web 体验 的 JavaScript 库 。 使 用 Spry 可 以 轻松 地 制作 出 多 级 菜单 栏 、 选 项 卡 式 面板 、 折 
侄 菜单 等 多 种 效果 。 


8.2.1 Spry 菜单 栏 


Spry 菜单 栏 主要 用 于 网 页 中 导航 效果 的 实现 , 它 提供 了 横向 和 纵向 两 种 布局 显示 方 
式 。 由 于 默认 风格 的 Spry 菜单 栏 外 观 一 般 不 能 满足 实际 需要 ,因此 通常 需要 配合 CSS 
样式 对 其 进行 美化 。 

【案例 8-4】 Spry 菜单 栏 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 Spry 
菜单 栏 的 位 置 。 PN 

@ 在 插入 面板 的 Spry 类 别 中 单 击 “Spry 菜单 栏 ” 
按钮 ,此 时 弹出 如 图 8-17 所 示 的 对 话 框 。 根 据 实际 
需要 选择 菜单 栏 的 布局 方向 ,这 里 选择 “水 平 " 单 选 
按钮。 °" 记 = 

@ 在 软件 设计 视图 中 ,选择 “Spry 菜单 栏 ? 左 上 和 角 
的 蓝 色 标签 ,此 时 属性 面板 显示 相关 参数 设置 ,如 
图 8-18 所 示 。 在 该 属性 面板 中 ,顶级 菜单 和 下 级 菜单 中 
的 项 目 都 可 以 通过 单 击败 和 加 按 钮 进行 添加 和 删除 ,还 
可 以 通过 曾 和 | 哪 按钮 调整 顺序 。 


请 选择 所 需 的 布局 。 


日 - 目 好 


图 8-17 “Spry 菜单 栏 ?对 话 框 


图 8-18 设置 “Spry 菜单 栏 ”属性 


搬入 Spry 菜单 后 ,在 CSS 面板 中 可 以 看 到 软件 自动 添加 了 许多 CSS 规则 ,选择 某 些 
规则 进行 修改 , 即 可 达到 改变 菜单 外 观 的 目的 。 
@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 8-19 所 示 。 


8.2.2 Spry 选项 卡 式 面 板 
选项 卡 式 面板 是 一 组 面板 的 集合 , 它 可 以 将 更 多 的 内 容 存储 到 紧凑 的 空间 中 。 用 户 
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单 击 选项 卡 式 面板 中 的 标签 即 可 查看 当前 面板 的 内 容 , 而 其 他 面板 的 内 容 将 会 被 隐藏 ， 
图 8-20 所 示 是 常见 的 选项 卡 式 面板 。 下面 以 实例 的 形式 讲解 创建 Spry 选项 卡 式 面板 创 
建 的 整个 过 程 。 


[ne 
Cla 


smn i i - 


公告 通知 


手机 安全 充值 | 机 票 | 点 卡 
E/-V8-4 Spry 蓉 单 栏 html 请 辆 入 手机 号 | | 100 元 国 | [充值 


图 8-19 Spry 菜单 栏 预览 效果 图 8-20 ”选项 卡 式 面板 


【案例 8-5〗 Spry 选项 卡 式 面板 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 Spry 
菜单 栏 的 位 置 。 

@ 在 插入 面板 的 Spry 类 别 中 单 击 “Spry 选项 卡 式 面板 ”按钮 , 即 可 完成 插入 。 

@ 在 设计 视图 中 ,可 以 直接 修改 选项 卡 内 部 的 文字 内 容 。 此 外 ,选择 “Spry 选项 卡 
式 面板 ?左上 角 的 蓝 色 标签 ,属性 面板 即刻 显示 相关 参数 设置 ,如 图 8-21 所 示 。 在 该 属性 
面板 中 , 单 击 配 或 局 按钮 可 以 添加 或 删除 选项 卡 的 数量 。 


属性 
选项 卡 式 面板 
嘲 FabbedPanels! 


且 定 义 此 Widget 


图 8-21 设置 Spry 选项 卡 式 面板 的 属性 


当 Spry 选项 卡 式 面 板 插入 网 页 内 部 时 可 以 发 现 , 软 件 自 动 创建 并 连接 了 外 部 CSS 
文档 和 JavaScript 文档 ,并 且 有 默认 风格 的 外 观 样式 作用 在 选项 卡 式 面板 中 。 

@ 根据 实际 需要 ,向 选项 卡 式 面板 中 添加 必要 的 文字 内 容 。 为 了 进一步 美化 外 观 ， 
这 里 简单 编写 了 CSS 样式 ,如 图 8-22 所 示 。 

Q@ 保存 当前 页 面 , 通 过 浏览 器 预览 即 可 看 到 效果 ,如 图 8-23 所 示 。 


8.2.3 Spry 折 松 式 构 件 


Spry 折 倒 式 构件 同样 是 一 组 面板 ,用 来 将 内 容 存 储 到 紧凑 的 空间 中 。 单 击 面 板 
上 的 标签 即 可 展开 或 收缩 折 共 面板 中 的 内 容 。 在 Spry 折 倒 式 构 件 中 ,每 次 只 能 有 一 
个 内 容 的 面板 处 于 打开 状态 。 下 面 以 实例 的 形式 讲解 创建 Spry 折 笃 式 构件 创建 的 
整个 过 程 。 


俩 、 


巧 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


<style type="text/css"> 
nk: 


margin:0; 
padding:0; 
} 
-TabbedPanels { 
width:250px; 
height:150px; 


D spy 项 Ft x 
IC 


ps 下 |】 体育 世界 
， 宇 汉 村 世界 炬 诞 训 有 锦标 赛 开幕 区 史 


} 
.TabbedPanelsContent { 
font-size:12px; 


} 
.TabbedPanelsContent ul { 
padding:10px Spx Spx 20pxi| 


，。 宇 府 杯 世界 乱 道 束 滑 锦标赛 开幕 感 兄 
* 宇 举 杯 世界 乱 道 束 光 锦 标 赛 开幕 感 兄 
，。 宇 府 杯 世界 短 道 束 光 锦标 赛 开幕 感 兄 
} 
</style> 


图 8-22 案例 8-5 的 CSS 规则 8-23 ”Spry 选项 卡 式 面板 预览 效果 


【案例 8-6】 Spry 折 又 式 构 件 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 Spry 
折 番 式 构 件 的 位 置 。 

@ 在 插入 面板 的 Spry 类 别 中 单 击 “Spry 折 芋 式 " 按 钮 , 即 可 完成 插入 。 

@ 在 设计 视图 中 ,可 以 直接 修改 内 部 的 文字 内 容 。 此 外 ,选择 “Spry 折 倒 式 ” 左 上 角 
的 蓝 色 标签 ,属性 面板 即刻 显示 相关 参数 设置 ,如 图 8-24 所 示 。 在 该 属性 面板 中 , 单 击 喇 
或 加 按钮 可 以 添加 或 删除 选项 卡 的 数量 。 

@ 根据 实际 需要 ,向 Spry 折 释 式 构 件 中 添加 必要 的 文字 内 容 。 保 存 当 前 页 面 , 通 过 
浏览 器 预览 即 可 看 到 效果 ,如 图 8-25 所 示 。 


可 

可 

可 
可 
可 


导 鹤 - :和 
自 定 义 此 Widgat 


于 伟人 4 万 元 


图 8-24 设置 Spry 折 笃 式 构件 的 属性 图 8-25 Spry 折 释 式 构件 预览 效果 


8.3 ”过 程 指导 一 一 “精品 课程 ”网 站 的 设计 与 制作 


本 节 以 设计 制作 大 学 精品 课程 网 站 为 目标 ,巩固 练习 有 关 布 局 的 相关 知识 。 通 过 本 
节 的 练习 ,读者 能 够 掌握 页 面 布局 的 基本 处 理 方法 。 
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8.3.1 过 程 分 析 


本 实例 的 主要 任务 是 设计 制作 大 学 精品 课程 网 站 。 拿 到 页 面 设计 稿 时 ,不 要 盲目 切 
图 ,而 是 要 首先 弄 清 网 页 的 布局 方式 ,分 析 一 下 版 式 结构 , 待 整 体 页 面 搭 建 有 明确 规划 后 ， 
再 根据 成 熟 的 规划 进行 切 图 。 

1. 主页 面 布 局 规划 

通过 成 熟 的 构思 与 设计 ,精品 课程 网 站 的 主页 最 终 效 果 如 图 8-26 所 示 , 布 局 如 
图 8-27 所 示 。 


礁 字 洗 科 技 大 学 


YUZE UNVERSTY OF SCIENCE ANDTECHNCLDcY 


NEWS EP 课程 简介 

| 《让 I 
op 本 要 村 和 nt 
本 1 企业 参与 和 当 建 主人 
2011 兴 风尘 所 制 认证 报名 通知 011- 4 学 ， 作 中 关上 要 个 六 各 扩 职 场所 “| 束 成 和 网 络 系统 管理 人 员 必修 的 课程 之 
2011 皇 隐 轩 科 认 证 报名 通 ‰ 2 现形 成 册 位 化 才学 过 各 这 有 条 计 实 际 工 人 过 得 的 项 上 学习 


te 小 型 掉 城 网 法 生 总 件 娄 划 和 说 
， 能 部 根据 讼 计 进 行 设备 过 型 ， 能 赵 按 昭 

网 估计 的 要 进行 近 名 直线 的 认 

计 , 龙 工 a i 
详 组 内 


i a 


2011 年 网 经 杰 衬 认证 并 名 通知 。 2 
2011 年 风 杰 料 认 证 报 扣 通知 


园艺 的 加 


届 沫 支 竺 。。 娄 学 弄 课程 尿 俐 。。 估 作品 


友情 钴 扩 


汀 当 和 了 辐 


图 8-26 精品 课程 网 站 主页 最 终 效果 图 (1) 


2. 子 页 面 布 局 
精品 课程 网 站 的 子 页 面 采用 T 形 布 局 ,最 终 效果 如 图 8-28 所 示 , 布 局 如 图 8-29 
所 示 。 


8.3.2 步骤 详解 


1. 前 期 准备 工作 

(1) 启动 Dreamweaver CS6 ,在 菜单 栏 中 执行 “站 点 ”>“ 新 建站 点 ”命令 ,在 弹出 的 对 
话 框 中 设置 站 点 名 称 及 路 径 。 

(2) 在 站 点 中 创建 images 和 style 两 个 文件 夹 。 
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wrap top 
nav 
nav_logo nav_menu 
main 
main_left main_mid main_right 
main_left_top main_mid_top 
main_left_bottom main_mid_bottom 
footer 
nav_logo footer_mid footer_behind 


8-27 精品 课程 网 站 主页 布局 示意 图 (1) 


EEC 


克 字 渗 科 技 大 学 


YUZE UNWERSTY OF SCIENCE AND TEcHNotoey 


Am 
ce 
-全 
WFNU 课程 设置 四 当前 位 置 计生 习 下 
i 扩 | | 
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浊 村 定位 。 课程 证 位 
Gn 。 课程 人 设计 
Wa » We 
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。 网 络 工程 行业 标准 
= 后 人 布线 TH 


pe 宁 洋 科技 大 学 地 址 ， 河 向 寺 基 由 三 夺 风 盏 守法 种 粮 大 全 计算 机 他 入 即 编 ，450000 到 全 三 本 


fens11218128 cam EPE 本 
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图 8-28 子 页 效果 图 
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top 


sub_wrap 


nav_logo nav_menu 


sub_main 


sub_main_left sub_main_main 


sub_main left top 


sub_main left_mid 


sub_main_left_bottom 


footer 


nav_logo footer_mid footer_behind 


图 8-29 子 页 布局 示意 图 


(3) 在 Dreamweaver CS6 的 菜单 栏 中 执行 “文件 ”一 “新 建 "命令 ,创建 一 个 空白 文档 ， 
并 命名 为 index. html。 

(4) 创建 一 个 外 部 CSS 样式 表 文 件 ,将 这 个 CSS 文件 保存 在 站 点 的 style 文件 夹 下 ， 
并 命名 为 div. css。 

(5) 在 Dreamweaver CS6 的 “CSS 样式 ”面板 中 , 单 击 “ 附 加 样式 表 ” 按 钮 圈 , 弹 出 “ 链 
接 外 部 样式 表 ” 对 话 框 ,将 之 前 创建 的 div. css 外 部 样式 文件 链接 到 index. html 页 面 中 。 


2. 开始 制作 主页 

(1) 页 面 项 部 的 制作 

@ 切换 到 div. css 文件 中 ,分 别 创建 通配符 选择 符 的 CSS 规则 所 body 之 标签 的 
CSS 规则 和 伪 类 的 相应 规则 ,如 图 8-30 和 图 8-31 所 示 。 

@ 切换 回 设 计 页 面 ,将 光标 置 于 页 面 视 图 中 ,在 插入 面板 的 “常用 ”选项 卡 中 单 击 “ 插 
入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 。 在 “插入 "下拉 列 表 框 中 选择 “在 插入 
点 ”选项 ,在 ID 框 中 输入 wrap, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 wrap 容器 。 切 
换 到 div. css 文件 中 ,创建 一 个 名 为 #wrap 的 CSS 规则 ,如 图 8-32 所 示 。 切 换 回 设计 页 
面 ,页 面 效果 如 图 8-33 所 示 。 

@ 将 光标 定位 在 设计 视图 的 wrap 容器 中 ,删除 多 余 的 文字 , 单 击 插入 面板 的 “搬入 
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人 
margin: Opx; 
padding: Opx; :link, a:visited 
border: Opx; color: #333; 
} text-decoration: none; 
body { font-weight: normal; 
font-family: "宋体"; } 
font-size:13px; a: hover, a:active 
color:#000; Color: #FFF; 
background-color:#FFF; text-decoration: underline; 
} 
图 8-30 通配符 选择 符 和 body 标签 的 CSS 规则 图 8-31 伪 类 的 CSS 规则 


wzap { 
width:984px; 
height:850px; 
background:url(../images/bg_01.jpg) no-repeat; 
margin:0 auto; 


图 8-32 ”名 为 # wrap 的 CSS 规则 


2 三 呈 了 站 村 


图 8-33 页 面 背 景 效 果 


Div 标签 "按钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 列 表 框 中 选择 “在 开始 标签 之 
后 ?选项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 一 div id 一 "wrap" 
选项 ,在 ID 框 中 输入 top, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 
wrap 容器 内 部 插入 top 容器 。 切 换 到 div. css 文件 中 , 创 
建 一 个 名 为 #top 的 CSS 规则 ,如 图 8-34 所 示 。 切 换 回 
设计 页 面 ,将 top 容器 中 多 余 的 文字 删 去 ,并 输入 “ 设 为 
首页 加 入 收藏 ”文字 内 容 ,页 面 效 果 如 图 8-35 所 示 。 

@ 在 代码 视图 中 ,修改 二 div id 一 "top" 二 标签 的 代 
码 , 如 图 8-36 所 示 。 再 次 切换 回 div. css 文件 中 ,创建 一 “图 8-34 名 为 #top 的 CSS 规则 


#top { 
float:right; 
width:150px; 
font-family: "黑体 "; 
text-align:right; 
margin-top:10px; 
margin-bottom:20px; 
padding-right:20px; 


第 8 章 行为 与 Spry 构件 ~ 


<div id="top"> <a href="#"> 设 为 首页 
i a </a><span>1</span><a href="#"> 加 入 收藏 
-和 </a> </div> 


图 8-35 在 #top 内 输入 文字 图 8-36 ”修改 标签 内 容 


个 名 为 #top span 的 CSS 规则 ,如 图 8-37 所 示 , 返 回 设 计 视 图 ,页 面 效 果 如 图 8-38 
所 示 。 

@ 将 光标 定位 在 设计 视图 的 wrap 容器 中 , 单 击 插 入 面板 的 “插入 Div 标签 "按钮 国 ， 
弹出 “插入 Div 标签 ”对 话 框 。 在 “插入 ”下 拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 
方 下 拉 列 表 框 中 选择 “二 div id 一"top" 二 ”选项 ,在 ID 框 中 输入 nav, 最 后 单 击 “ 确 定 ” 按 
钮 , 即 可 在 top 容器 后 面 插入 nav 容器 。 切 换 到 div. css 文件 中 ,创建 一 个 名 为 # nav 的 
CSS 规则 ,如 图 8-39 所 示 。 


Fnav 1 
width: 984px; 


top span { 
padding-left:Sp: float:left; 


overflow:hidden; 


padding-right 


} 1 


图 8-37 名 为 #top span 的 CSS 规 则 图 8-38 #top 最终 效 果 8-39 ”名 为 #nav 的 CSS 规则 


@ 切换 回 设 计 页 面 , 将 nav 层 中 多 余 的 文字 删 去 , 单 击 插入 面板 的 “搬入 Div 标签 ” 
按钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 , 在 “插入 ”下 拉 菜 单 中 选择 “在 开始 标签 之 后 ”选项 ， 
并 在 其 后 方 下 拉 菜 单 中 选择 “一 div id 一 "nav" 二 ”选项 ,在 ID 框 中 输入 nav_logo, 最 后 单 
击 “ 确 定 ” 按 钮 , 即 可 在 nav 容器 内 部 搬入 nav_logo 容器 。 切 换 到 div. css 文件 中 ,创建 一 
个 名 为 #nav_logo 的 CSS 规则 ,如 图 8-40 所 示 。 返 回 设计 视图 ,页 面 效果 如 图 8-41 
所 示 。 


nav-To90 T 
float:left; 
width:280px; 
height :70px; 
background: 
url(../images/logo.gif) no-repeat; 
margin-left:15px; 


契 字 主 科 技 大 学 


UZE UNIVERSITY OF SCIENCE AND TECHNOLOGY; 


} 


8-40 名 为 并 nav_logo 的 CSS 规则 图 8-41 插入 logo 的 效果 


@ 将 光标 定位 在 设计 视图 的 nav 容器 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 ， 
弹出 “插入 Div 标签 ”对话 框 ,在 “插入 "下拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 
下 拉 列 表 框 中 选择 二 div id= 王 "nav_logo" 二 选项 ,在 ID 框 中 输入 nav_menu, 最 后 单 击 “ 确 
定 ” 按 钮 , 即 可 在 nav_logo 容器 后 面 插入 nav_menu 容器 。 切 换 到 div. css 文件 中 ,创建 
一 个 名 为 # nav _ menu 的 CSS 规则， 如 


av menu T 
图 842 所 示 。 切换 回 设计 页 面 ,将 nuv_menu 层 中 | Ber3ep os aa 
多 余 的 文字 删 去 ,在 其 内 部 插入 名 为 # nav_menu_ float:laft; 


head 的 容器 ,并 创建 相应 的 CSS 规则 ,如 图 8-43 


所 示 8-42 名 为 #nav_menu 的 CSS 规则 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


Fnav menu head T 
float:left; 
width:20px; 
height:36px; 
background:url(../images/nav menu head.gif 
no-repeat; 


} 


图 8-43 名 为 #nav_menu_head 的 CSS 规则 


同样 的 方法 ,在 #nav_menu_head 后 部 插入 名 为 # nav_menu_mid 的 容器 ,并 创建 
相应 的 CSS 规则 ,如 图 8-44 所 示 。 切 换 回 设计 页 面 ,将 nav_menu_mid 容器 中 多 余 的 文 
字 删 去 ,插入 一 组 无 序列 表 , 并 输入 相应 的 文字 ,此 时 当前 代码 结构 如 图 8-45 所 示 。 


av menu mid 1 
float:left; 
width:580px; 
height :36px; 


background:url(../images/nav_bg.jpg) 
repeat—x; 
} 


图 8-44 名 为 #nav_menu_mid 的 CSS 规则 


@ 代码 修改 完成 后 ,切换 到 div. css 文件 中 ,创建 CSS 规则 ,如 图 8-46 所 示 。 返 回 设 
计 视 图 ,导航 菜单 的 效果 如 图 8-47 所 示 。 


#nav_ menu mid ul { 
list-style:none; 
margin: Opx; 

div id="nav menu mid"> padding: Opx; 
<ul> } 
<li><a href="#"” target="_self"> 课 程 首页 </a></1i> #nav_menu mid 1i { 
<li><a href="#"” target="_self"> 课 程 设 置 </a></1i> float:left; 
<li><a target="_self"> 教 学 内 容 </a></1i> margin-top:10px; 
<li><a target="_self"> 方 法 手段 </a></1i> padding-left:11px; 
<li><a target="”_self"> 教 学 队伍 </a></1i> } 
<li><a target="”self"> 实 践 条 件 </a></1i> #nav_menu mid a { 
<li><a "” target="”self"> 教 学 效果 </a></1i> font-family: "黑体 "; 
<li><a "” target="”_self"> 工 学 结合 </a></1i> font-size:15px; 
</ul> Color:#FFF; 
</div> } 
8-45 ”修改 nav_menu_mid 层 中 的 代码 图 8-46 创建 相应 的 CSS 规则 


图 8-47 导航 菜单 应 用 样式 后 的 效果 


@ 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 
Div 标签 ”对 话 框 ,在 “插入 "下拉 列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 
框 中 选择 二 div id 一 "nav_menu_mid" 之 选项 ,在 ID 框 中 输入 nav_menu_tail, 最 后 单 击 
“确定 ”按钮 , 即 可 在 nav_menu_mid 容器 后 面 插入 nav_menu_tail 容器 。 切 换 到 div. css 
文件 中 ,创建 一 个 名 为 #nav_menu_tail 的 CSS 规则 ,如 图 8-48 所 示 。 切换 回 设计 页 面 ， 
删除 其 中 的 文字 , 即 可 看 到 页 面 效 果 如 图 8-49 所 示 。 


第 8 章 行为 与 Spry 构件 


nav menu tail { 
float:left; 
width:20px; 
height:36px; 
background: url(../images/nav menu tail.gif)| 
no-repeat; 


图 8-48 名 为 #nav_menu_tail 的 CSS 规则 8-49 插入 背景 图 像 后 的 效果 


(2) 页 面 中 部 的 制作 

@ 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 
Div 标签 ”对话 框 ,在 “插入 "下拉 列表 框 中 选择 * 在 标签 之 后 选项 ,并 在 其 后 方 下 拉 列 表 
框 中 选择 过 div id 一 "nav" 过 选项 ,在 ID 框 中 输入 main, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 nav 
容器 后 面 插入 main 容器 。 切 换 到 div. css 文件 中 ,创建 一 个 名 为 并 main 的 CSS 规则 ,如 
图 8-50 所 示 。 

@ 将 光标 定位 在 设计 视图 中 ,删除 多 余 的 文字 , 单 击 插入 面板 的 “插入 Div 标签 ” 按 
钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 ,在 “插入 "下 拉 列 表 框 中 选择 “在 开始 标签 之 后 ”选项 ， 
并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id 一 "main" 之 选项 ,在 ID 框 中 输入 main_left, 最 后 
单 击 “ 确 定 ” 按 钮 , 即 可 在 main 容器 内 部 插入 main_left 容器 。 切 换 到 div. css 文件 中 , 创 
建 一 个 名 为 #main_left 的 CSS 规则 ,如 图 8-51 所 示 。 

Wain 1 


float:left; 
width:984px; 


#main left { 


float:left; 
width:320px; 
height:260px; 
margin-left:10px; 


height:280px; 
margin-top:368px; 


图 8-50 名 为 # main 的 CSS 规则 图 8-51 名 为 #main_left 的 CSS 规则 


@ 同样 的 方法 ,在 main_left 内 部 插入 名 为 main_left_top 的 容器 ,并 创建 相应 的 
CSS 规则 ,如 图 8-52 所 示 。 切 换 回 设计 页 面 ,删除 其 中 的 文字 , 即 可 看 到 页 面 效 果 如 
图 8-53 所 示 。 


Fmain left top { 
background: 

url(../images/main left_ top bg.jpg) no-repeat; 
height:35px; 


} 


图 8-52 名 为 并 main_left_top 的 CSS 规则 图 8-53 为 并 main_left_top 增加 顶部 背景 


@ 根据 规划 ,main_left 区 域 是 显示 新 闻 列 表 的 区 域 ,这 里 使 用 过 ul 二 二 1 之 和 
反 span 盖 3 个 标签 实现 新 闻 列表 的 外 观 样式 ,具体 的 讲解 在 后 续 章 节 陆 续 介 绍 ,这 里 读者 
仅 需 体验 制作 过 程 即 可 。 

切换 到 代码 视图 .将 光标 定位 在 “一 div id 一 "main_left_top" 记 ”的 后 面 ,输入 标题 .新 
闻 简 要 以 及 发 布 日 期 ,并 用 不 同 的 标签 将 其 包围 ,此 时 结构 代码 如 图 8-54 所 示 。 

@ 切换 到 div. css 文件 中 ,为 news_list 类 、 一 h3 二 、 一 1 二、 一 a 过 和 二 span 二 标签 编 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


<div id="main_left_top"> 
<h3>NEWS</h3> 
<ul class="news list"> 
<1li><a href="#">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i> 
<1i><a href="#">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i>| 
<1i><a href="#">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i> 
<1i><a href="#">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i> 
<1i><a href="#">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i>| 
</ul> 
</div> 


图 8-54 新闻 列 表 的 结构 代码 


写 相 应 的 CSS 规则 ,如 图 8-55 所 示 。 切 换 回 设计 页 面 , 即 可 看 到 页 面 效 果 如 图 8-56 
所 示 。 

@ 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 
Div 标签 ”对 话 框 ,在 “插入 ”下拉 列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 
框 中 选择 “二 div id 一 "main_left_top" 二 ?选项 ,在 ID 框 中 输入 main_left_bottom, 最 后 单 
击 “ 确 定 ” 按 钮 , 即 可 在 main_left_top 容器 后 面 插入 main_left_bottom 容器 。 切 换 到 div. 
css 文件 中 ,创建 一 个 名 为 #main_left_bottom 的 CSS 规则 ,如 图 8-57 所 示 。 


#main_left top h3 { 
height: 40px; 
font-family:Arial, Helvetica, 
sans-serif; 
font-size: 16px; 
font-weight:bold; 
Color: #105cb6; 
padding-left:20px; 
padding-top: 10px; 


} 

.news_list * { 
margin: 0; 
padding: 0; 
list-style:none; 
text-decoration : none; 


2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 。 “2011-1-12 
2011 年 网 络 思科 认证 报名 通知 。 2011-1-12 
2011 年 网 络 思科 认证 报名 通知 。 2011-1-12 


2011 年 网 络 思科 认证 报名 通知 。 2011-1-12 | 


,news_list li { 
float:left; 
padding-left:20px; 
width: 300px; 
height :20px; 
overflow: hidden; 


.news_list li a { 
width:200px; 图 8-56 ”应 用 规则 后 新 闻 列 表 的 效果 
float: left; 

} 

.news_list li a:hover { 
text-decoration: none; 
Color:#F32600; 


#main left bottom { 
float:left; 
width:310px; 
height :80px; 
margin-top:20px; 
margin-left:Spx; 
overflow:hidden; 


.news_list 1i span 
float: lef: 
width:75px; 
color:#999999; 


图 8-55 ”定义 新 闻 列表 所 用 的 CSS 规则 8-57 名 为 # main_left_bottom 的 CSS 规则 


第 8 章 行为 与 Spry 构件 


@ 切换 回 设计 页 面 ,删除 多 余 的 文字 ,将 图 ;; 
像 images/main_left_bottom_bg. gf 插入 main_ 一 
left_bottom 层 中 ,并 使 用 热点 工具 绘制 热点 区 de 
域 ,如 图 8-58 所 示 。 2011 年 网 络 思 利 认证 报名 通知 

人 @ 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 “|: 2 人 
的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 标签 
对 话 框 ,在 “插入 ”下拉 列表 框 中 选择 “在 标签 之 后 ” 
选项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id 一 
"main_left" 过 选项 ,在 ID 框 中 输入 main_mid, 最 
后 单 击 “ 确 定 ” 按 钮 , 即 可 在 main_left 容器 后 面 持 
入 main_mid 容器 。 

同样 的 方法 ,在 main_mid 层 内 部 插入 main_mid_top 层 , 切 换 到 div. css 文件 中 ,分 
别 创 建 名 为 #main_mid 和 间 main_mid_top 的 CSS 规则 ,如 图 8-59 所 示 。 切 换 回 设计 页 
面 ,删除 多 余 的 文字 ,将 “flash/ 课 程 特色 . swf”Flash 影片 文件 插入 到 main_mid_top 层 
中 ,页 面 效 果 如 图 8-60 所 示 。 


图 8-58 绘制 热点 区 域 


ain mid 1 
float:left; 
margin-left:S5px; 


} 


#main mid top { 一 ~ 本 一 
Ts35bx， 全 课程 竺 名 | 
tt, : em € 
argin Cop:20Bes 境 ， 形 成 岗位 化 教学 过 程 - 
margin-bottom:20px;| 人 J 

图 8-59 创建 CSS 规则 图 8-60 插入 Flash 影片 文件 后 的 效果 


@ 单 击 插入 面板 的 “插入 Div 标签 "按钮 国 , 弹出 “插入 Div 标签 ”对话 框 ,在 “插入 ” 
下 拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 过 div id 二 "main_ 
mid_top" 二 选项 ,在 ID 框 中 输入 main_mid_bottom, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 main_ 
mid_top 容器 后 面 插入 main_mid_bottom 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 # main 
mid_bottom 的 CSS 规则 ,如 图 8-61 所 示 。 

切换 回 设计 页 面 ,删除 多 余 的 文字 ,分 别 插入 两 张 装饰 性 图 片 ,并 输入 相应 的 文字 ,如 
图 8-62 所 示 。 


; | go | 
#main mid bottom { 8 W | 
一 一 ! | 


width:350px; 


height:105px; | 师 生 交流 COJDIUNICATION 课程 申报 表 | 
} | 
8-61 名 为 并 main_mid_bottom 的 CSS 规则 图 8-62 插入 图 片 并 输入 文字 


@@ 从 图 中 可 以 看 出 ,图 片 和 文字 并 不 能 按照 规划 的 那样 显示 ,下 面 主要 针对 图 片 和 
文字 进行 外 观 的 美化 。 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


将 视图 切换 为 代码 视图 ,在 二 div id 一 "main_mid_bottom" 之 标签 内 部 ,修改 相应 的 
标签 ,如 图 8-63 所 示 。 


<div id-"main mid bottom"> 
<ul> 
<li><a href="#"><img src="images/main mid bottom 01.gif” width="60”heighc="85”/><strong> 师 生 交 | 
流 </srrong><span>COMMUNICATION</span></a></1i> 
<li><a href="#"><img src="images/main mid baotrom_ 02.gif" width="60”heighr="85”/><strong> 课 程 申 
服 表 </strong><span>DECLRRRTION FoRMc/span></a></1i> 
</ul> 
</div> 


8-63 ”修改 main_mid_bottom 内 部 标签 


加 切换 到 div. css 文件 中 ,编写 相应 的 CSS 规则 ,如 图 8-64 所 示 。 切 换 回 设计 页 面 ， 
即 可 看 到 页 面 效果 如 图 8-65 所 示 。 


#main mid bottom ul li { 
float:left; 
margin-left:15px; 
display:inline; 

} 

#main mid bottom ul lia{ 
display:block; 
width:150px; 
height:100px; 
text-decoration:none; 
text-align:center; 
overflow:hidden; 

} 

#main mid bottom ul li a strong { 
font-size:16px; 
font-family: "黑体 "; 
line-height:15px; 
font-weight:100; 

Color:#333; 
overflow:hidden; 

} 

#main mid bottom span { 
display:block; 
font-family:"Arial Black", Gadget, sans-serif; 
font-size:10px; 
text-align: left; 
color:#999; 

} 

#main mid bottom a:hover strong { 
Color:#39F; 


} 


图 8-64 编写 相应 的 CSS 规则 


@ 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 
Div 标签 ”对 话 框 ,在 “插入 ”下拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 
框 中 选择 二 div id 一 "main_mid" 过 选项 ,在 ID 框 中 输入 main_right, 最 后 单 击 “ 确 定 ” 按 
钮 , 即 可 在 main_mid 容器 后 面 插入 main_right 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 
井 main_right 的 CSS 规则 ,如 图 8-66 所 示 。 

切换 回 设计 页 面 ,删除 多 余 的 文字 ,输入 相关 文字 ,并 为 标题 添加 环绕 标签 h3 ,再 次 
切换 到 div. css 文件 中 ,创建 h3、p 和 伪 类 的 相关 CSS 规则 ,如 图 8-67 所 示 。 切 换 回 设计 
页 面 ,此 时 页 面 效 果 如 图 8-68 所 示 。 
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全 课程 特色 1 
1. 企业 参与 课程 软 本 建设 和 课堂 教 

学 ， 依 据 项 目 整个 流程 模拟 职场 环 

境 ， 形 成 岗位 化 教学 过 程 . 


$9 妆 


师 生 交流 课程 申报 表 


COMMUNICATION 


J ain right 1 
float:left; 
width:275px; 
height:260px; 


margin-left:Spx; 
background: 
url(../images/main right_bg.jpg) no-repeat; 
DecLARATION FORM } 


图 8-65 对 图 片 和 文字 应 用 样式 后 的 效果 图 8-66 名 为 #main_right 的 CSS 规则 


main right h3 { 
height :20px; 
font-family: "黑体 "; 


} 


font-size:15px; 
color: #105cb6; 

padding-left:20px; 
padding-top:15px; 


课程 简介 
《计算 机 网 络 工程 》 课 程 是 计算 机 网 络 
专业 的 职业 技术 课 ， 是 网 络 工程 、 网 络 系统 


#main right p { 集成 和 网 络 系统 管理 人 员 必 修 的 课程 之 一 。 
text-indent :2em; 该 课程 通过 对 实际 工作 过 程 的 项 目 学 习 ， 使 
line-height:18px; 学 生 能 够 对 中 小 型 局 域 网 进行 总 体 规划 和 设 
padding-left:13px; 计 ， 能 够 根据 设计 进行 设备 选 型 ， 能 姬 按照 
padding-right:13px; 网 络 总 体 设计 的 要 求 进行 综合 布线 系统 的 设 

) 计 、 施 工 、 管 理 和 测试 验收 。 ly, 

fmain right a:hover { 详细 内 容 .… a | 
text-decoration:none; 、 
color:#F32600; i e 4 


} 
图 8-67 创建 标题 和 段落 的 CSS 规则 


图 8-68 标题 和 段落 应 用 样式 后 的 效果 


(3) 页 面 底部 的 制作 

a 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 
Div 标签 ”对话 框 ,在 “插入 ”下拉 列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 
框 中 选择 二 div id 一 "main" 之 选项 ,在 ID 框 中 输入 footer, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 
main 容器 后 面 插入 footer 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 #footer 的 CSS 规则 ， 
如 图 8-69 所 示 。 


#footer { 


clear:both; 
height :65px; 


margin:0; 
padding-top:10px; 
background:url(../images/footer bg.gif) repeat-x;| 


图 8-69 名 为 #footer 的 CSS 规则 


@ 切换 回 设计 页 面 , 删 除 多 余 的 文字 , 单 击 插入 面板 的 “搬入 Div 标签 ”按钮 国 , 在 
footer 容器 内 部 插入 footer_logo 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 井 footer_logo 
的 CSS 规则 ,如 图 8-70 所 示 。 

@ 同样 的 制作 方法 .在 井 footer_logo 后 部 插入 名 为 #footer_mid 的 容器 ,并 创建 相 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


#footer logo { 
float:left; 
width:250px; 
height: 60px; 
background:url(../images/footer_ logo.gif) no-repeat; 


Eooter mid { 
float:left; 
width:520px; 
height: 60px; 


图 8-70 名 为 #footer_logo 的 CSS 规则 8-71 名 为 #footer_mid 
的 CSS 规则 


应 的 CSS 规则 ,如 图 8-71 所 示 。 
切换 回 设计 页 面 ,删除 多 余 的 文字 ,输入 版 权 信 息 等 内 容 。 将 视图 切换 为 代码 视图 ， 
在 二 div id 一 "footer_mid" 过 标签 内 部 修改 相应 的 标签 ,如 图 8-72 所 示 。 


<div id="footer mid"> 
<dl> 
<dd> 地 址 ， 河 南 省 郑州 市 东风 路 西 段 字 泽 科技 大 学 计算 机 学 院 邮编 ，450000 </dd> 
<dd>Email: wufeng1121@126.com</dd> 
<dt>Copyright @All Rights Reserved 宁 祥 网 络 </at> 
</dl> 
</div> 


图 8-72 ”修改 footer_mid 内 部 标签 


@ 切换 到 div. css 文件 中 ,创建 名 为 #footer_mid dl 的 CSS 规则 ,如 图 8-73 所 示 。 
切换 回 设计 页 面 ,页 面 效 果 如 图 8-74 所 示 。 


Eooter mid dl { 
font-family: "黑体 "; 
font-size:13px; 
color:#666; 
text-align:center; se 
padding-left:15px; : 地 址 


省 郑州 市 去 风 洲 古 成 字 泽 科 扩 大治 计 算 机 简 院 郎 编 ， 450000 
:mai |: wufeng1121@126. com 


padding-top:12px; : Copyright Ext Rights Reserved 字 泽 网 络 科技 
图 8-73 名 为 #footer_mid dl 图 8-74 #footer_mid 的 效果 
的 CSS 规则 


@ 在 footer_mid 后 部 插入 名 为 footer_behind 的 容器 ,删除 多 余 的 文字 ,输入 “友情 
链接 "文字 内 容 , 并 插入 跳 转 菜单 类 型 的 表单 。 切 换 到 div. css 文件 中 ,创建 名 为 # footer 
_behind 的 CSS 规则 ,如 图 8-75 所 示 。 切 换 回 设计 页 面 ,页 面 效 果 如 图 8-76 所 示 。 


FFooter behind 1 
float:left; 
width:180px; 
height:40px; 
line-height:20px; 


font-family: "黑体 "; 
font-size:13px; 
color:#666; 友情 链接 


padding-top:10px; 国家 精品 课程 贡 源 同 国 


图 8-75 名 为 #footer_behind 的 CSS 规则 8-76 ”为 跳 转 菜单 应 用 样式 
后 的 效果 
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3. 精品 课程 子 页 的 制作 过 程 

精品 课程 网 站 子 页 面 与 主页 有 一 定 相似 之 处 ,对 于 子 页 面 顶部 区 域 的 制作 过 程 这 里 
不 再 袭 述 , 这 里 仅 对 侧 边栏 以 及 右 侧 内 容 显示 区 域 布局 的 实现 加 以 讲解 。 

(1) 根据 前 面 所 讲 内 容 , 自 行 制作 子 页 面 上 部 的 有 关 区 域 。 

(2) 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 
Div 标签 ?对 话 框 , 在 “插入 "下拉 列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下拉 列 表 
框 中 选择 二 div id 一 "nav" 记 选项 ,在 ID 框 中 输入 sub_main, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 
在 nav 容器 后 面 插 入 sub_main 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 #sub_main 的 
CSS 规则 ,如 图 8-77 所 示 。 

(3) 切换 回 设 计 页 面 ,删除 多 余 的 文字 ,在 sub_main 容器 内 部 再 次 插入 sub_main_ 
left 容器 ,并 为 其 编写 CSS 规则 ,如 图 8-78 所 示 。 


ub main left 1 
float:left; 
width:180px; 


sub main { 


float:left; 
width:984px; 
height:auto; 
margin-top:225px; 


height :300px; 
margin-left:25px; 
} 


图 8-77 名 为 #sub_main 的 CSS 规则 8-78 名 为 #sub_main_left 的 CSS 规则 


(4) 同样 的 制作 方法 ,在 sub_main_left 容器 内 部 插入 sub_main_left_top 容器 ,并 为 
其 编写 CSS 规则 ,如 图 8-79 所 示 。 切 换 回 设计 页 面 ,删除 多 余 的 文字 ,并 输入 MENU 课 
程 设置 "文字 内 容 。 将 视图 切换 为 代码 视图 ,修改 二 div id 一 "sub_main_left_top" 之 内 的 
标签 ,如 图 8-80 所 示 。 


#sub main left top { 

width:180px; 

height :80px; 

background:url(../images/sub_main left_top_bg.jpg) 
no-repeat; 


} 


图 8-79 名 为 并 sub_main_left_top 的 CSS 规则 


<div id="sub main left top"> 


<h3> MENU<span> 课 程 设置 </span></h3>| 
</div> 


图 8-80 ”修改 sub_main_left_top 容器 内 的 标签 


(5) 切换 到 div. css 文件 中 ,为 sub_main_left_top 的 h3 和 span 标签 创建 CSS 规则 ， 
如 图 8-81 所 示 。 切 换 回 设计 页 面 ,页 面 效 果 如 图 8-82 所 示 。 

(6) 将 光标 定位 在 设计 视图 中 , 单 击 插入 面板 的 “插入 Div 标签 ”按钮 国 ,弹出 “插入 
Div 标签 ”对话 框 ,在 “插入 "下拉 列表 框 中 选择 “在 标签 之 后 选项 ,并 在 其 后 方 下 拉 列 表 
框 中 选择 “过 div id 一 "sub_main_left_top" 过 ”选项 ,在 ID 框 中 输入 sub_main_left_mid， 
最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 sub_main_left_top 容器 后 面 插入 sub_main_left_mid 容器 。 
切换 到 div. css 文件 中 ,创建 名 为 # sub_main_left_mid 的 CSS 规则 ,如 图 8-83 所 示 。 


~ 
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和 sub main left top h3 { 
height :30px; 
font-family: "黑体 "; 
font-size:20px; 
Color:#39F; 
text-align:center; 
padding-top:25px; 

} 

#sub main left top h3 span { 


color:#666; 
margin-left:Spx; 
| font-size:18px; MENU 课程 设置 
8-81 创建 h3 和 span 标签 的 CSS 规则 8-82 ”为 标题 和 span 应 用 样式 后 的 效果 


sub main left mid { 
width:180px; 
height:auto; 


background:url(../images/sub main left mid bg.jpg) 
repeat-—y; 


b 


8-83 ”名 为 #sub_main_left_mid 的 CSS 规则 


(7) 切换 到 代码 视图 ,将 光标 定位 在 二 div id 一 "sub_main_left_mid" 过 的 后 面 , 插 入 
一 组 无 序列 表 , 并 输入 相应 的 文字 内 容 , 此 时 结构 代码 如 图 8-84 所 示 。 


<div id="sub main left mid"> 
<ul> 
<1i><a href="#"> 课 程 介绍 </a></1i> 
<1i><a href="#"> 课 程 定位 </a></1i> 
<li><a href="#"> 课 程 设计 </a></1i> 
<1i><a href="#"> 课 程 标准 </a></1i> 
<1i><a href="#"> 职 业 技能 标准 </a></1i> 
</ul> 
</div> 


8-84 ”插入 无 序列 表 内 容 


(8) 切换 到 div. css 文件 中 ,为 无 序列 表 创 建 相 关 CSS 规则 ,如 图 8-85 所 示 。 切 换 回 
设计 页 面 , 此 时 页 面 效 果 如 图 8-86 所 示 。 之 后 ,在 sub_main_left_mid 容器 后 部 插入 sub_ 
main_left_behind 容器 ,并 为 其 编写 CSS 规则 ,如 图 8-87 所 示 。 


#sub main left mid ul { rr 
padding:0 25px; 
line-height :30px; : ”MENU 课程 设置 


} : 
#sub main left mid ul 1i { : 
list-style:none; | 
text-align:center; | 
border-bottom: 1px dashed #CCC; | 
} 
#sub_main left mid ul a:hover { | 
color:#39F; | 
text-decoration:none; ! 


图 8-85 ”为 无 序列 表 创 建 CSS 规则 8-86 ”为 无 序列 表 应 用 样式 后 的 效果 
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sub main left behind { 


background: 


rl1(../images/sub main left behind bg.jpg) no-repeat; 


height:25px; 


图 8-87 创建 #sub_main_left_behind 规则 


(9) 同样 的 制作 方法 ,对 页 面 主 内 容 区 域 进行 布局 ,其 结构 代码 如 图 8-88 所 示 ,完成 
后 的 CSS 样式 如 图 8-89 和 图 8-90 所 示 。 


<div id="sub main main"> 

<div id="sub main main top"><img src= 
"../images/sub main main top 01.gif" width="14" 
height="14”/><span> 当 前 位 置 :课程 设置 </span></ div> 

<div id="sub main main content"> 

<ul class="sub main main content list"> 

href="#"> 课 程 介 绍 </a></1i> 
href="#"> 课 程 定位 </a></1i> 
href="#"> 课 程 整体 设计 </a></1i> 
href="#"> 课 程 标准 </ a></1i> 
href="#"> 职 业 技能 标准 </a></1i> 
href="#"> 网 络 工程 行业 标准 </a></1i> 
href="#"> 综 合 布线 行业 标准 </ a></1i> 


<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</div> 
</div> 


图 8-88 主 内 容 区 域 结 构 代 码 


ub main main 1 

float:left; 

height: 800px; 
margin-left:10px; 

} 

#sub_ main main top | 
width:720px; 
height:S55px; 
background; 


.gif) repeat-x; 

} 

#sub_ main main top img 
margin-top:20px; 
margin-left:30px; 

} 


#sub_ main main top span { 
color: #666; 
font-family: "黑体 "; 


font-size: 14px; 
padding-left:10px; 


url(../images/sub main main top_bgl 


图 8-89 创建 页 面 主 内 容 区 域 的 CSS 规则 (1) 


(10) 返回 设计 视图 ,此 时 页 面 效 果 如 图 8-91 所 示 。 同 首页 中 制作 footer 的 方法 一 


样 , 制 作 子 页 面 的 底部 区 域 。 


至 此 ,精品 课程 网 站 的 主页 和 子 页 面 布局 的 实现 工作 已 经 基本 完成 了 ,后 期 还 需 根据 
实际 情况 增加 文字 链接 ,以 及 加 入 多 媒体 元 素 ,由 于 篇 幅 所 限 ,这 里 不 再 著述 ,请 读者 自行 


练习 。 


Houb main main 
width:720px 
height:auto; 

.sub main main content_list { 
font-size: 14px; 
padding-top:20px; 
padding-left:S50px; 
line-height:30px; 
list-style:square; 

#sub main main content 1i { 
border-bottom: 1px dashed #CCC; 

.sub main main content_ list 

a:hover 

Color:#F00; 

text-decoration:none; 


图 8-90 创建 页 面 主 内 容 区 域 的 CSS 规则 (2) 
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图 8-91 页 面 主 内容 区 域 的 效果 


8.4 自主 任务 一 一 “精品 课程 ”网 站 主页 的 制作 


参照 8.3 节 所 讲 内 容 , 以 建设 精品 课程 网 站 为 实例 任务 ,自主 完成 精品 课程 网 站 主页 
的 制作 ,最终 效果 如 图 8-92 所 示 ,布局 如 图 8-93 所 示 。 


设 为 首页 | 加 入 收藏 


NASAWEB 


eST OAINE 


译 各 负责 人 : 美 宁 洋 
201 | 年 计算 机 网 络 工程 精品 课程 


2010 "ATURED COURSES OF COVPUTER NETWORKS ENGNEERNG 


证 可 人 
0 网 绝 黑 科 认 证 报 各 二 类 再 再 卫 色 4 计算 机 网 绝 工 程 》 课程 是 计算 机 本 络 
2011 年 更 络 居 科 认证 摊 名 十 知 1 企业 多 与 可怕 建设 和 课 汪 才 入 >。 | 三 业 的 中 业 技术 课 ， 症 隐 络 工 得 、 网络 不 统 
ett rt 夭 示 和 有 网络 竹 统管 理 人 员 必修 的 主 程 之 一 。 
坊 ， 形 册 位 化 亲生 这 和 这 得 语 计 对 寺 际 工作 计 和 的 柄 目 学 习 ， 便 
2011 幸 网络 黑 科 认 证 殷 各 请 各。 2011-1-12 学 生 能 二 对 中 小 型 局 拓 网 进行 总 体 规 和 讼 
2011 年 网络 时 科 认 证 返 各 通知 。 2011-1-12 计 ， 训 名 根据 设计 进行 设备 迁 掉 ， 能 名 按照 
网 并 总 体 设计 风 要 求法 行 综合 布 续 季 纺 抱 设 
计 、， 施工、 管 末 和 测验 收 。 a) 
快速 ”政策 教学。 评 程 or 
外 本 区 区 里 er 0) 详细 内 容 .…。 了 
全 一 师 生 交流 课程 申报 条 ww 人 全、 
ommomcanon ecuanamon FOR < GZ 
NASAWEB 和 
BEST Ca 国家 本 中 课程 泊 江 中 图 


图 8-92 精品 课程 网 站 主页 最 终 效果 图 (2) 
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main_left_top 


main_mid_top 


main_left_bottom 


main_mid_bottom 


wrap top 
nav 
nav_logo nav_menu 
main 
main_left main_mid main_right 


nav_logo 


footer 


footer_mid footer_behind 


图 8-93 ”精品 课程 网 站 主页 布局 示意 图 (2) 


8.5 习题 


. 什么 是 Spry? 


mm 上 性 


变 得 美观 。 


.什么 是 行为 ? 什么 是 事件 ? 
. 举例 说 明 ,在 网 页 中 * 行 为 "都 应 用 于 哪些 方面 ? 
. 如何 实现 网 页 警告 窗口 的 出 现 ? 


. 在 页 面 中 添加 Spry 选项 卡 式 面板 ,根据 需要 修改 其 中 的 CSS 样式 规则 ,使 其 外 观 
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CSS 进 阶 提高 


【本 章 导读 】 

通过 之 前 的 学 习 , 读 者 应 该 能 深刻 体会 到 “结构 与 表现 相 分 离 ” 的 重要 思想 ,以 及 
HTML 5 的 必要 性 。 本 章 在 原 有 的 学 习 基 础 上 ,向 读者 介绍 有 关 CSS 的 一 些 技巧 和 常用 
技术 ,希望 能 够 帮助 读者 进一步 拓展 思维 ,提高 制作 网 页 的 水 平 。 

【学 习 目标 】 

名 掌握 CSS Sprite 技术 及 其 使 用 方法 ; 

避 掌握 部 分 伪 类 选择 器 的 基本 知识 ,以 及 使 用 方法 ; 

名 了 和 解 CSS 3 渐变 和 CSS 3 过 渡 的 相关 知识 ,并 能 够 利用 相关 CSS 规则 实现 简单 

效果 。 


9.1 CSS Sprite 技术 


CSS Sprite 通常 被 翻译 为 “CSS 图 像 拼 合 " 或 “CSS 贴图 定位 ”, 它 是 目前 网 站 开发 中 
应 用 较为 成 熟 的 技术 之 一 ,该 技术 最 重要 的 作用 就 是 减轻 服务 器 的 负载 ,提高 网 页 加 载 
速度 。 


9.1.1 CSS Sprite 技术 简 述 


1. 技术 介绍 

自从 CSS 被 广泛 应 用 ,HTML 文档 便 倾 向 于 语义 化 ,一 般 情况 下 设计 人 员 不 再 向 标 
签 中 书写 装饰 性 的 内 容 , 而 是 把 这 些 外 观 呈 现 的 任务 交 给 CSS。 

2004 年 ,Dave Shea 提出 了 一 种 使 用 CSS 控制 组 合 图 片 的 方案 ,该 方案 就 是 后 来 被 
广泛 应 用 的 CSS Sprite 技术 。 该 技术 的 本 质 就 是 把 网 页 中 许多 要 用 到 的 小 背景 图 片 通 
过 Photoshop 整合 到 一 张 图 片 中 ,再 利用 CSS 的 background-image 属性 、background- 
repeat 属性 、background-position 属性 的 组 合 进行 背景 定位 。 最 重要 的 是 通过 调整 
background-position 属性 的 属性 值 ,使 图 片 改 变 位 置 ,让 访问 者 看 到 的 仅 是 应 该 看 到 的 ， 
那些 不 该 看 到 的 背景 就 被 遮盖 住 了 。 

由 于 多 张 背景 图 片 被 整合 在 一 张 图 片 内 , 当 页 面 加 载 时 并 不 是 单独 加 载 每 张 图 片 ,而 
是 一 次 性 加 载 组 合 过 的 整 张 图 片 ,因此 大 大 减少 了 HTTP 请 求 的 次 数 , 减 轻 服 务 器 压力 ， 
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这 就 是 诸多 大 型 网 站 都 在 使 用 CSS Sprite 的 重要 原因 。 此 外 ,提前 加 载 的 图 片 被 储存 在 
浏览 器 的 缓存 中 ,后 期 调用 时 可 以 直接 读 取 ,缩短 了 鼠标 悬 停 时 加 载 图 片 的 时 间 延 迟 , 增 
强 了 访问 者 的 视觉 体验 。 
2. 技术 应 用 
CSS Sprite 技术 常 被 应 用 在 大 型 网 站 的 背景 控制 中 ,图 9-1 和 图 9-2 所 示 是 一 些 CSS 
Sprite 使 用 范例 。 


图 9-1 太平 洋 电脑 网 部 分 背景 图 片 


会 ， 

DDDDDD 如 
Sogau 汶 | [| 日 
[| 、 
图 9-2 搜狐 网 的 部 分 背景 图 片 


3. 优 缺 点 

CSS Sprite 非常 值得 学 习 和 应 用 ,但 网 站 中 是 否 应 该 使 用 CSS Sprite 还 需要 根据 实 
际 情况 进行 分 析 , 它 的 优点 主要 表现 在 以 下 两 个 方面 。 

(1) 能 够 有 效 减少 网 页 的 HTTP 请 求 , 大 幅 提 高 页 面 性 能 。 

(2) 能 够 有 效 减少 图 片 的 字 节 数 。 例 如 ,将 三 张大 小 均 为 2KB 的 图 片 拼 合成 一 张 图 
片 后 总 字 节 数 小 于 6KB。 

缺点 主要 表现 在 以 下 两 个 方面 。 

(1) CSS Sprite 大 多 使 用 固定 的 像素 定位 ,灵活 性 较 差 。 

(2) 在 开发 的 时 候 较 为 麻烦 ,需要 用 Photoshop 或 其 他 测量 工具 计算 出 每 个 背景 元 
素 的 精确 位 置 。 

总 之 ,网 页 设计 者 需要 整体 权衡 一 下 利 灼 ,在 可 维护 性 和 降低 负载 之 间 选 择 最 适合 的 
郁 蕊 。 


9.1.2 CSS Sprite 技术 详解 


为 了 使 读者 更 容易 地 理解 CSS Sprite, 这 里 以 某 网 站 的 图 标 背 景 为 例 , 演 示 如 何 使 用 
CSS Sprite 技术 实现 页 面 效 果 。 
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【案例 9-1】 CSS Sprite 技术 详解 。 

本 案例 使 用 的 是 一 张 由 多 个 图 标 整 合 在 一 起 的 图 标 背 景 图 片 , 如 图 9-3 所 示 , 拟 通过 
调整 背景 图 片 的 background-position 属性 值 ,实现 在 相应 文字 列表 的 左 侧 显示 对 应 
图 标 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 使 用 一 组 无 序列 表 
对 文字 内 容 进 行规 划 , 具 体 的 结构 代码 如 图 9-4 所 示 。 


<1i class="books"><a href="#"> 图 书 c/a></1i> 

<11i class="telephone"><a href="#"> 手 机 </a></11>| 
<1i class="clothes"><a href="#"> 服 装 </a></1i> 
<1i class="car"><a href="#"> 汽 车 </a></1i> 

<1i class="furniture"><a href="#"> 家 具 c/a></1i>| 
<1li class="life"><a href="#"> 生 活 </a></1i> 

<1i class="mamicare"><a href="#"> 孕 驾 </a></1i> 


画 
La 
鱼 
帘 
[23 
号 


@ 


图 9-3 图 标 背 景 图 9-4 案例 9-1 的 结构 代码 


@ 有 了 语义 化 的 结构 ,下 面 主 要 对 样式 进行 定义 : 首先 ,从 大 到 小 进行 定义 ,将 外 边 
距 内 边 距 和 边框 设置 为 0px。 其 次 ,定义 所 有 列表 1i 标签 的 宽度 为 80px, 高 度 为 20px， 
超出 的 部 分 进行 隐藏 设置 。 再 次 ,使 用 *liststyle:none; ”规则 ,清除 1i 的 默认 样式 ,并 且 
设置 i 标签 中 的 内 容 缩 进 20px 的 距离 ,用 于 放置 图 标 。 最 后 ,增加 背景 图 片 , 具 体 的 样 
式 代 码 如 图 9-5 所 示 。 

@ 保存 页 面 文档 ,通过 浏览 器 预览 后 的 效果 如 图 9-6 所 示 。 仔 细 观 察 效果 图 可 以 发 
现 ,虽然 每 个 列表 中 都 有 背景 图 片 , 但 显示 的 都 是 图 标 背 景 中 的 第 一 个 图 标 ,并 不 是 根据 
文字 内 容 显 示 对 应 图 标的 效果 。 


nav ul T 
margin: Opx; 
Padding: Opx; 
border: Opx; 


1it 
width: 80px; 


height: 20px; 

overflow; hidden; 

list-style: none; 

Padding-left: 20px; 

background: url(ico bg.gif) no-repeat 0 0; 


#nav 1i a {text-decoration: none;} 


图 9-5 ul 和 1 的 CSS 样式 规则 图 9-6 案例 9-1 的 预览 效果 


@ 为 了 解决 上 述 问 题 ,需要 针对 每 个 不 同类 别 的 列表 i 标签 ,分 别 编写 对 应 的 CSS 
样式 ,以 达到 想 要 的 页 面 效果 。 添 加 部 分 CSS 样式 ,利用 background-position 属性 改变 
背景 图 片 的 位 置 , 具 体 的 CSS 样式 代码 如 图 9-7 所 示 。 
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加 保存 当前 页 面 文档 ,再 次 预览 可 以 看 到 页 面 效果 ,如 图 9-8 所 示 。 


ar ii DooKS + 
background-position: Opx Opx: 

} 

#nav 1i.telephone { 
background-position: -250px Opx; 


} 
#nav li.clorhes { 
background-position: 0 -60px; 
》 
inav li.car { 
background-position: -250px -150px; 


#nav 1i.furniture { 
background-position: -250px -90px; 
} 
#nav 1i.life { 
background-position: -250px -60px; 
》 
#nav 1i.mamicare { 
background-position: Opx -90px; 


} 


图 9-7 改变 背景 图 片 的 位 置 图 9-8 案例 9-1 的 最 终 预 览 效 果 


从 图 中 可 以 看 出 ,不 同 的 列表 内 容 左 侧 显 示 不 同类 型 的 图 标 ,达到 了 预想 的 效果 。 引 
起 图 标 改 变 的 原因 在 于 应 用 于 每 个 列表 的 类 ,通过 background-position 属性 定位 在 背景 
图 片 的 不 同位 置 ,从 而 显示 不 同 的 图 标 。 

分 析 图 9-7 所 示 的 样式 代码 可 知 , 为 了 实现 每 个 二 li 二 标签 对 应 的 图 标 有 所 不 同 , 本 
案例 中 针对 每 个 不 同 的 列表 分 别 定义 不 同 的 类 名 ,并 在 CSS 样式 中 通过 修改 定位 坐标 ， 
使 之 能 得 到 相应 的 图 标 。 

这 里 有 个 十 分 重要 的 问题 ,既然 某 些 图 标 位 于 水 平方 向 250px, 垂 直方 向 150px 的 位 
置 上 ,为 什么 在 CSS 样式 中 调用 时 却 使 用 负 值 呢 ? 

background-position 属性 值 为 负 值 的 情况 需要 这 样 理解 . 本 实例 中 用 于 显示 列表 的 
区 域 宽度 为 80px, 高 度 为 20px, 要 想 显示 对 应 的 图 标 势 必要 移动 背景 图 片 ,使 图 标 精确 
显示 在 列表 中 。 根 据 background-position 属性 的 定义 可 知 ,属性 值 中 的 第 一 个 数字 表示 
水 平 位 置 ,第 二 数字 表示 垂直 位 置 , 而 默认 状态 下 元 素 及 其 元 素 背 景 是 以 左上 角 为 原点 进 
行 定位 ,这 就 是 为 什么 在 未 进行 背景 定位 时 所 有 图 标 均 显示 为 图 标 背 景 中 左上 角 图 标的 
原因 。 

对 于 其 他 列表 项 来 说 ,由 于 需要 显示 不 同 的 图 标 ,就 要 对 背景 图 片 进行 移动 处 理 。 
“background-position: 50px 100px;” 这 条 规则 说 明 , 图 像 将 被 移动 到 距 左 50px, 距 顶 
100px 的 位 置 上 , 即 图 片 向 右 移动 了 50px, 向 下 移动 了 100px。 反 过 来 ,如 果 图 片 被 向 左 
或 向 上 移动 , 则 background-position 的 属性 值 为 负 值 。 本 案例 中 ,以 class 类 名 为 car 的 
列表 为 例 , 样 式 代码 为 “#nav li. car {background-position: 一 250px 一 150px;)”。 

此 规则 将 背景 图 片 向 左 移动 了 250px 的 距离 ,向 上 移动 了 150px 的 距离 ,将 汽车 图 
标 显 示 在 汽车 文字 链接 的 左 侧 ,示意 图 如 图 9-9 所 示 。 由 此 ,可 以 总 结 出 定位 图 片 在 向 各 
个 方向 移动 时 取 值 的 正 负 关系 ,如 图 9-10 所 示 。 另 外 ,在 实际 应 用 中 并 不 是 随意 的 拼合 
图 片 ,而 是 要 根据 页 面 的 整体 需要 进行 规划 考虑 的 。 在 使 用 CSS Sprite 的 时 候 需 要 注意 
以 下 几 个 方面 。 


下 
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加 

里 2 
怠 

和 NR ( 负 值 , 负 值 ) (正信 , 负 人 ) 

自 

= -250px 
E ( 负 值 , 正 值 ) ( 正 值 , 正 值 ) 
® 
图 9-9 CSS Sprite 定位 9-10 ”background-position 属性 正 负 取 值 关系 


(1) 容器 的 宽度 和 高 度 要 固定 。 
(2) 超出 容器 宽度 和 高 度 的 部 分 需要 隐藏 。 
(3) 各 个 图 片 之 间 要 留 有 空隙 ,以 便 调 用 时 不 会 出 现 文字 覆盖 图 片 的 情况 。 


9.2 CSS 3 伪 类 选择 器 


在 之 前 的 章节 中 ,读者 已 经 接触 到 一 些 选择 器 的 使 用 方法 ,本 节 主 要 向 读者 介绍 CSS 
3 中 新 增 的 伪 类 选择 器 ,以 便 在 工作 中 灵活 运用 。 


9.2.1 :root、:not、:target 和 ::selection 选择 器 


:root 选择 器 

:root 选择 器 将 样式 与 文档 的 根 元 素 进行 匹配 。 这 里 根 元 素 指 的 是 位 于 文档 树 中 最 
顶层 的 元 素 ,在 HTML 中 , 根 元 素 始终 是 html 元 素 。 

【案例 9-2】 :root 选择 器 。 

g@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-11 所 示 
的 文档 结构 。 

@ 在 当前 页 面 的 head 区域, 编写 相应 的 CSS 规则 。 这 里 将 body 元 素 的 背景 颜色 设 
置 为 红色 ,使 用 :root 选择 器 将 根 元 素 背景 色 设置 为 黄色 ,具体 代码 如 图 9-12 所 示 。 


<style type="text/css"> 
:root { 

background: #FCO 
Jy/* 滑雪 肖 有 色 为 色 "/ 


body 


pody> 
<h1>root 选 择 器 </h1> background: #F30 
<p>| |</p>| ) /设置 boay 元 素 冰 景色 为 红色 * / 
(</body> /style> 

图 9-11 案例 9-2 的 页 面 结构 9-12 使 用 :root 选择 设置 背景 色 


@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-13 所 示 。 


2. :not 选择 器 
:not 选择 器 能 够 排除 某 个 结构 中 的 子 元 素 , 让 它 不 继承 当前 样式 。 
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body 元 素 背 景 一 一 


html 元 素 背 景 


9-13 :root 选择 器 预览 效果 


【案例 9-3】〗 :not 选择 器 。 

O@ 继续 使 用 案例 9-2 中 的 页 面 结构 。 

@ 在 当前 页 面 的 head 区 域 ,修改 相应 的 CSS 规则 ,具体 代码 如 图 9-14 所 示 。 保 存 
当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-15 所 示 。 


全 3 CC Dfile:///E:/ 编 | 三 


Zatyle type="text/css"S> 
:root { 

background: #FCO; 
)V* 设 置 根 元 素 背景 色 为 黄色 */ 
body { 

background: #F30 
y/* 设 和 pad 元 于 和 果 名 为 色 -/ 
body *:noc (hl) { 

background; 


#69. 
}/* 设 置 除了 h1 元 素 以 外 ， 他 上 景色 为 绿色 "7 


</style> 


图 9-14 增加 :not 选择 器 规则 图 9-15 :not 选择 器 预览 效果 


本 案例 中 , 先 将 body 元 素 背景 颜色 设置 为 红色 ,又 使 用 :not 选择 器 设置 在 body 元 
素 内 除 hl 元 素 以 外 的 背景 色 为 绿色 。 根 据 当前 页 面 结构 分 析 可 知 ,hl 元 素 背 景色 为 红 
色 ,p 元素 背景 色 为 绿色 。 


3. :target 选择 器 

:target 选择 器 能 够 选取 当前 活动 的 目标 元 素 。 这 里 目标 元 素 指 的 是 , 当 页 面 中 包含 
锚 链 接 时 ,该 锚 链 接 所 指向 的 某 个 具体 的 元 素 。 

【案例 9-4】 :target 选择 器 。 

@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-16 所 示 
的 文档 结构 。 

@ 在 当前 页 面 的 head 区 域 ,编写 相应 的 CSS 规则 ,具体 代码 如 图 9-17 所 示 。 


SR 
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@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-18 所 示 。 


body> 
<p><a href="#news1"> 跳 转 至 内 容 1</a></p>| 
<p><a href="#news2"> 跳 转 至 内 容 2</a></p>| 
<p id="newsl"><b> 内 容 1...</b></p> 

<p id="news2"><b> 内 容 2...</b></p> 
</body> 


图 9-16 案例 9-4 的 页 面 结构 


border: 2px solid #D4D4D4; 


background-color: #eSeecc; 
)/* 设 置 边框 和 背景 颜色 */ 
/style> 


图 9-17 ” ;target 选择 器 规则 图 9-18 :target 选择 器 预览 效果 


4.: :selection 选择 器 
: :selection 选择 器 能 够 匹配 被 用 户 选 择 时 的 部 分 内 容 应 用 别 的 样式 。 需 要 说 明 的 
是 ,目前 只 能 向 该 选择 器 应 用 少量 CSS 样式 (color background .cursor 以 及 outline) 。 
【案例 9-5】 :: selection 选择 器 。 
@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-19 所 示 
的 文档 结构 和 CSS 规则 。 
@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-20 所 示 。 


doctype henl> 
<html> 
<head> 
I<meta charset="utf-8"> 
<title>selection 选 择 器 </title> 
<style type="text/css"> 
::selection { 

background: #FCO; 
)V* 设 置 背 景 颜色 */ 
</style> 
</head> 


DD:selection 远 择 | x 量 
JF = 


请 读者 尝试 选择 


此 处 部 分 文字 , I 
看 看 有 什么 效果 


<body> 
|<h1> 请 读者 岩 试 选择 此 处 部 分 文字 ， 看 看 有 什么 效果 </h1>| 
</body> 
/html> 


图 9-19 案例 9-5 的 页 面 结 构 与 CSS 规则 图 9-20 ::selection 选择 器 预览 效果 


9.2.2 :first-child :last-child 和 :only-child 选择 器 


1. :first-child 选择 器 

:first-child 选择 器 用 于 选取 隶属 其 父 元 素 的 首 个 子 元 素 。 

2. :last-child 选择 器 

:last-child 选择 器 用 于 选取 隶属 其 父 元 素 的 最 后 一 个 子 元 素 。 

3。 :only-child 选择 器 

:only-child 选择 器 用 于 选取 当 父 元 素 有 了 唯一 子 元 素 时 的 元 素 对 象 。 
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【案例 9-6】 :first-child、:last-child 和 :only-child 选择 器 。 

@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-21 所 示 
的 文档 结构 。 

@ 在 当前 页 面 的 head 区 域 ,编写 相应 的 CSS 规则 ,具体 代码 如 图 9-22 所 示 。 

@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-23 所 示 。 


style type="text/css"> 
li:first-child { 


<body> background-color: #0CF; 
<nav id="page nav"> )/* 设 置 第 一 个 列表 项 的 背景 色 */ 
<ul> li:1last-child { 


<li><a href=! background-color: #6F9; 
}/* 设 置 最 后 一 个 列表 项 的 背景 色 */ 
article { 

border: 1px #0066FF solid; 


<li><a href="#"> 导 航 4</a></1i>| margin: Spx; 


</ul> padding: Spx; 
</nav> ) 
<article> hi:only-child { 

<h1> 这 里 有 1 个 hi</h1> font-style: italic; 
</article> font-family: "微软 雅 黑 "; 
<article> font-weight: bolder; 

<h1> 这 里 有 2 个 hi</h1> font-size: 30px; 

<h1> 这 里 有 2 个 hi</h1> Color:#F00; 
</article> )V* 仅 作用 于 父 元 素 包 含 1 个 hl 标题 的 元 素 */| 
</body> /style> 


图 9-21 案例 9-6 的 页 面 结构 9-22 ”多 种 选择 器 规则 


站 frst-child、 
4 了 CGIQ 


这 里 父 元 素 中 仅 包含 
1 个 hl 元素 ， 所 以 ， 


only-child 选 择 器 能 够 | 芝 择 育 7 人 不 
作用 到 该 元 素 中 寡 1 人 hl 


这 里 有 2 个 hl 
这 里 有 2 个 hl 


图 9-23 多 种 选择 器 预览 效果 


9.3 CSS 3 渐变 


以 往 要 在 网 页 中 实现 渐变 效果 依赖 于 预先 制作 完成 的 图 像 渐变 背景 ,这 种 办 法 虽然 
不 那么 灵活 ,但 绝 大 多 数 设计 者 还 必须 这 么 去 做 ,以 便 能 给 访问 者 安全 地 呈现 出 渐变 效 


- 
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果 。 目前 ,使 用 CSS 3 能 够 实现 渐变 效果 , 且 支 持 无 极 缩放 ,但 是 该 方法 仅 适 用 于 Webkit 
和 Gecko 引擎 的 浏览 器 ,而 且 在 使 用 过 程 中 的 语法 也 有 不 同 。 本 节 仅 向 读者 简单 介绍 基 
于 Webkit 引擎 的 浏览 器 实现 的 渐变 效果 ,至 于 更 多 知识 鉴于 内 容 较 多 ,请 读者 查阅 相关 
资料 。 


1. Webkit 引擎 支持 的 CSS 渐变 语法 
(1) 线性 渐变 
-webkit-gradient 是 Webkit 引擎 对 渐变 的 实现 参数 ,例如 下 面 的 线性 渐变 语句 : 


— webkit— gradient (linear, left top, left bottom, fram(# 000), to(#£ff), color- stop(0.4, #666)); 


第 一 个 参数 表示 渐变 类 型 (type) ,可 以 是 linear( 线 性 渐变 ) 或 者 radial( 径 向 渐变 ) 。 
第 二 个 参数 和 第 三 个 参数 ,都 是 一 对 值 , 分 别 表示 渐变 起 点 和 终点 。 这 对 值 可 以 用 坐 
标 形式 表示 ,也 可 以 用 关键 值 表示 ,比如 left top( 左 上 角 ) 和 left bottom( 左 下 角 ) 。 
第 四 个 和 第 五 个 参数 ,分 别 表示 渐变 颜色 的 开始 颜色 值 和 结束 颜色 值 。 
第 六 个 参数 是 一 个 color-stop 函数 ,该 函数 包含 两 个 参数 ,第 一 个 参数 取 值 范围 是 
0.0 一 1.0, 表 示 位 置 偏 移 量 ; 第 二 个 参数 是 停靠 颜色 值 。 当 前 对 象 中 包含 两 个 以 上 的 渐 
变 ,color-stop 函数 才能 使 用 。 
(2) 径 向 渐变 
例如 ,有 如 下 径 向 渐变 语句 : 
-webkit- gradient (radial, 125 125, 50, 
125 125, 100, 
from(# 000), to(# FEE)); 
这 里 radial 表示 渐变 类 型 为 径 向 渐变 ,有 两 个 同心 圆 , 圆 心 坐标 为 (125,125) ,内 圆 半 
径 为 50, 外 圆 半 径 为 100, 从 内 圆 黑 色 到 外 圆 白 色 径 向 渐变 ,超出 外 圆 半径 部 分 显示 
为 白色 。 
2. 创建 CSS 3 渐变 
【案例 9-7】 CSS 3 渐变 。 
O@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-24 所 示 
的 文档 结构 。 


body> 
div id="box-1"” class="box"> 线 性 渐变 </div 
div id="box-2" class="boxn> 径 向 新 变 </div 
/body> 


9-24 案例 9-7 的 页 面 结构 


@ 在 当前 页 面 的 head 区 域 .编写 相应 的 CSS 规则 ,具体 代码 如 图 9-25 所 示 。 
@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-26 所 示 。 
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style type="text/css"S 
.box { 
width: 250px; 
height: 250px; 
margin: 10px; 
display: -webkit-box; 
-webkit-box-align: center; 
-webkit-box-pack: center; 
color: #FFF; 
font : 50px "微软 雅 黑 "; 
) 
#box-1 { 
background-image: 
-webkit-gradient (linear, left top, left| 
bottom, from(#ff4f02), to(#8f2c00), 
color-stop(0.5, #FC0)); 
》 
#box-2 { 
background-image: 
-webkic-gradient (radial, 125 125, 50, 
125 125, 100, from(#00C), to(#0CF)); 
;} 
</style> 


图 9-25 创建 渐变 的 CSS 规则 图 9-26 渐变 预览 效果 


9.4 CSS 3 过 渡 


在 CSS 2. 1 之 前 ,设计 师 通常 依赖 JavaScript 脚本 实现 二 维 或 三 维 动画 ,而 现在 借助 
CSS 3 同样 可 以 完成 类 似 的 效果 。 

CSS 3 过 渡 (transition 属性 ) 是 元 素 从 一 种 样式 逐渐 改变 为 男 一 种 效果 的 过 程 ,通俗 
地 讲 就 是 一 种 动画 的 转换 过 程 ,例如 渐 显 、 渐 隐 和 动画 的 快慢 等 。 


9.4.1 transition 属性 


transition 属性 是 一 个 复合 属性 ,可 以 同时 定义 transition-property、 transition- 
duration、transition-timing-function 和 transition-delay 多 种 子 属 性 。 下 面 简单 介绍 各 种 
属性 的 含义 。 


1 transition-property 属性 

transition-property 属性 规定 应 用 过 渡 效果 的 CSS 属性 的 名 称 , 可 以 取 none( 没 有 元 
素 获得 过 渡 效 果 ) 、all( 所 有 属性 都 获得 过 渡 效 果 ) 和 property( 指 定 应 用 过 渡 效 果 的 属性 
名 称 ) 三 种 属性 值 。 


2. transition-duration 属性 
transition-duration 属性 规定 完成 过 渡 效 果 需 要 花费 的 时 间 ( 以 秒 或 毫秒 计 )。 默 认 
状态 下 ,动画 的 过 渡 时 间 为 0 秒 , 即 访问 者 不 会 看 到 变化 过 程 直接 看 到 结果 。 如 果 将 时 间 


区 
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设置 为 1 秒 , 则 访问 者 会 在 1 秒 钟 内 看 到 变化 效果 。 
3。. transition-timing-function 属性 
transition-timing-function 属性 用 来 定义 过 渡 动 画 的 效果 ,可 以 取 以 下 六 种 属性 值 。 
(1) ease: 慢 速 开始 ,中 间 变 快 ,最 后 慢 速 结束 的 过 渡 效 果 。 
(2) linear: 以 相同 速度 开始 至 结束 的 过 渡 效 果 。 
(3) ease-in: 渐 显 效果 。 
(4) ease-out: 渐 隐 效果 。 
(5) ease-in-out: 淡 入 淡出 效果 。 
(6) cubic-bezier: 特殊 的 立方 贝 塞 尔 曲 线 效果 。 


4. transition-delay 属性 
transition-delay 属性 规定 过 渡 效 果 延 迟 多 长 时 间 开 始 。 


5. transition 属性 

transition 属性 是 以 上 4 个 属性 的 简写 属性 ,例如 “transition: all ls ease-in-out 
0.4s;”CSS 规则 指 的 是 当前 对 象 获 得 过 渡 效 果 , 其 过 渡 时 间 为 1 秒 ,过 渡 效果 为 淡 和 人 淡 
出 ,并 且 延 迟 0. 4 秒 再 开始 执行 。 


9.4.2 CSS 3 过 渡 动画 的 实现 


为 了 让 读者 深入 了 解 CSS 3 过 渡 动 画 效果 的 实现 过 程 , 这 里 以 案例 的 形式 进行 分 析 
讲解 。 

【案例 9-8】 CSS 3 过 渡 动 画 。 

本 例 想 要 完成 的 效果 如 图 9-27 所 示 , 当 鼠 标 悬 停 在 圆 形 对 象 上 时 ,紫色 半 透 明 的 贺 
形 从 中 间 缩 放 至 整个 圆 形 对 象 , 里 面 的 文字 延迟 显示 ; 当 鼠 标 移 除 圆 形 对 象 时 ,紫色 半 透 
明 的 圆 形 逐 渐 消 失 , 仅 显 示 包 含 图 像 背景 的 立体 边框 。 


四 css 3 过 滤 动 画 
4 > CQ 


图 9-27 CSS 3 过 渡 动 画 最 终 效果 


g@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-28 所 示 
的 文档 结构 。 
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FEsayy 
|<div id="box-1"> 
<aiv> 
<h3> 我 是 谁 ? </h3> 


</div> 
</aiv> 
|<div id="box-2"> 
<div> 


<h3> 我 的 家 人 </h3> 


</div> 

</div> 

|<div id="box-3"> 
<div> 


<h3> 成 长 日 记 </h3> 


</div> 
</div> 
[</body> 


<p> 我 是 一 个 4 岁 的 宝宝 ， 在 幼儿 园 上 中 一 班 。</pP> 


<p> 我 爱 我 的 家 人 ， 他 们 为 我 整 天 忙碌 。</p> 


<p> 除 了 在 幼儿 园 渡 过 每 天 ， 周 末 我 还 有 外 出 活动 。 </p>| 


9-28 案例 9-8 最 初 的 页 面 结构 


@ 为 了 使 3 个 块 级 div 元 素 水 平 排列 ,这 里 拟 使 用 浮动 属性 来 解决 这 个 问题 。 此 外 ， 
为 了 使 3 个 块 级 div 元 素 外 观 相 同 , 拟 创建 box 类 分 别 应 用 到 3 个 div 元 素 中 ,具体 的 
CSS 规则 ,以 及 对 页 面 结构 的 修改 如 图 9-29 和 图 9-30 所 示 。 保 存 当 前 页 面 , 通 过 浏览 器 
预览 后 的 效果 如 图 9-31 所 示 。 


left;) 


"£1 {float: 
‘box { 

width: 220px; 

height:; 220px; 

color: #333; 

border-radius; 50$;/* 设 置 图 角 矩形 ， 使 正方 形 的 外 观 显 
示 为 图 型 */ 

margin: 10px; 

cursor: pointer;/* 限 标 悬 停 该 对 象 时 显示 出 手 型 也 标 外 观 */ 

box-shadow: insec 0 0 0 16px rgba(255,255,255,0.6), 
0 lpx 2px rgba(0,0,0,0.1) ;/* 设 置 边框 的 粗细 、 颜 色 和 透明 度 */ 
) 


<body> 
<div id="box-1" class="f1 box" > 
<div> 
<h3> 我 是 谁 ? </h3> 
<p> 我 是 一 个 4 岁 的 宝宝 ， 在 幼儿 园 上 中 一 班 * </p> 
</div> 
</div> 
<div id="box-2" class="f1 box"> 
<div> 
<h3> 我 的 家 人 </h3> 
<p> 我 爱 我 的 家 人 ， 他 们 为 我 整 天 忙碌 。</p> 
</div> 
</div> 
<div id="box-3" class="f1 box"> 
<div> 
<h3> 成 长 日 记 </h3> 
<p> 除 了 在 幼儿 园 渡 过 每 天 ， 周 末 我 还 有 外 出 活动 。</p>| 
</div> 
</div> 
</body> 


9-29 创建 相关 类 规则 


及 css 3 过 流动 本 
¢CI 


图 9-30 应 用 旨 和 box 类 后 的 页 面 结 构 


我 是 谁 ? 
个 4 岁 的 宝宝 ， 在 幼儿 园 


我 的 家 人 


我 是 
上 中 一 班 。 


9-31 


成 长 日 记 


PR 他 们 为 我 整 天 “除了 在 幼儿 园 渡 过 每 天 ， 周末 


我 还 有 外 出 活动 。 


应 用 生 和 box 类 后 的 预览 效果 
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@ 为 了 方便 地 控制 页 面 结 构 中 的 各 个 元 素 , 这 里 再 次 修改 页 面 结构 ,引入 ch-info 类 
作用 在 div 元 素 上 ,使 其 作为 紫色 动画 背景 的 容器 出 现 , 修 改 后 的 页 面 结构 和 对 应 的 CSS 
规则 ,如 图 9-32 和 图 9-33 所 示 。 


<body> 
<div id="box-1" class="fl box"> 
<div class="ch-info"> 
<h3> 我 是 谁 ? </h3> 
<p> 我 是 一 个 4 岁 的 宝宝 ， 在 幼儿 园 上 中 一 班 。 </p> 
</div> 
</div> 
<div id="box-2" class="fl box"> 
<div class="ch-info"> 
<h3> 我 的 家 人 </h3> 
<p> 我 爱 我 的 家 人 ， 他 们 为 我 整 天 忙碌 。</p> 
</div> 
</div> 
<div id="box-3" class="f1 box"> 
<div class="ch-info"> 
<h3> 成 长 日 记 </h3> 
<p> 除 了 在 幼儿 园 渡 过 每 天 ， 周 末 我 还 有 外 出 活动 。</p>| 
</div> 
</div> 
</body> 


9-32 引入 ch-info 类 作用 在 div 元 素 上 


box-1 {background-image: url(images/00.jpg);) 
|#box-2 {background-image: url (images/02.jpg);) 
#box-3 {background-image: url (images/03.jpg);} 
,ch-info { 


background: rgba(140,65,170，0.6);/* 设 置 紫色 的 背景 色 ， 其 透明 度 为 60%*/ 
width: inherit;/* 继 承 父 级 元 素 的 宽度 */ 

height: inherit; 

border-radius: 50#;/w 设 置 圆 角 矩 形 ， 这 里 使 正方 形 显示 为 圆 型 */ 

opacity; 0;/* 设 置 对 象 的 透明 度 ， 这 里 是 完全 透明 ， 初 始 状态 无 法 看 到 当前 对 象 */ 
-webkit-transition: all 0.4s ease-in-out;/* 设 置 当前 对 象 动 画 效 果 为 

| 淡 入 淡出 ， 且 动画 时 间 为 0.4 秒 */ 

transition: all 0.4s ease-in-out; 

-webkit-transform: scale(0) ;/* 设 置 当前 对 象 的 缩放 比例 ， 这 里 为 缩放 到 最 小 */| 


transform: scale(0); 


图 9-33 ch-info 类 规则 


@ 通过 预览 可 以 发 现 ,虽然 图 像 已 经 载 入 ,但 是 没有 过 渡 动 画 效果 ,其 原因 是 没有 使 
用 伪 类 :hover 作为 触发 对 象 。 这 里 进一步 完善 CSS 规则 ,如 图 9-34 所 示 。 

@ 为 了 让 容器 内 标题 和 段落 文字 显示 得 更 加 美观 ,这 里 针对 标题 和 段落 编写 CSS 规 
则 ,如 图 9-35 所 示 。 

至 此 ,保存 网 页 文档 ,并 通过 浏览 器 即 可 看 到 具有 过 渡 动 画 的 最 终 效果 。 文 中 与 过 渡 
相关 的 CSS 规则 ,以 及 较 难 理解 的 CSS 规则 均 有 详细 的 注释 和 讲解 ,请 读者 仔细 体会 其 
中 的 含义 。 
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习题 


“box:hover { 
box-shadow: inset 0 0 0 lpx rgba(255,255,255,0.1), 
0 ipx 2px rgba(0,0,0,0.1); 
)V* 当 鼠标 悬 停 时 ， 边 框 的 粗细 、 颜 色 和 透明 度 */ 
.box:hover .ch-info { 
-webkit-transform: scale(1) :/* 当 鼠标 悬 停 时 ， 缩 让 比 
例 朗 为 1， 即 原始 大 小 =*/ 
transform: scale(1); 


opacity: 1:/* 当 鼠标 悬 停 时 ， 透 明度 为 1 ， 即 完全 显示 */ 


} 
,box:hover .ch-info p { 

opacity: 1;/* 当 鼠标 悬 停 时 ， 透 明度 为 1 ， 即 完全 显示 */ 
} 


9-34 “与 伪 类 hover 相关 的 CSS 规则 


.ch-info h3 { 
letter-spacing: 2px; 
font-size: 30px; 
margin: 0 0 0 SOpx; 
padding: 70px 0 0 0; 
height: S50px; 
font-family: "微软 雅思 "; 

} 

.ch-info p { 
padding: 10px Spx; 
margin: 0 30px; 
font-size:; 12px; 
border-top: 1px solid rgba(255,255,255,0.5); 
opaciry: 
-webkit-transition: all 13 ease-in-out 0.43; 

/* 设 置 段 落 p 元 素 延 迟 0 . 4 种 后 淡 入 淡 入 显示 ， 其 过 省 时 间 为 1 秒 */ 


transition: all 1s ease-in-out 0.437 


图 9-35 ”针对 标题 和 段落 的 CSS 规则 


什么 是 CSS Sprite 技术 ? 它 的 优 、 缺 点 又 是 什么 ? 


什么 是 :not 选择 器 ? 什么 是 :target 选择 器 ? 
Webkit 引擎 支持 的 CSS 渐变 语法 是 什么 ? 
使 用 transition 属性 能 够 实现 何 种 效果 ? 
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站 点 测试 .上 传 与 维护 


【本 章 导 读 】 

在 完成 本 地 站 点 所 有 页 面 的 制作 工作 以 后 ,整个 网 站 并 不 能 直接 投入 使 用 ,必须 经 过 
全 面 而 完整 的 测试 工作 , 当 网 站 能 够 稳定 地 运行 后 ,才能 将 站 点 上 传 到 已 准备 好 的 空间 
中 。 本 章 将 从 网 站 的 测试 .上 传 和 维护 三 个 方面 介绍 相关 的 知识 和 操作 方法 。 

【学 习 目 标 】 

名 了 解 站 点 测试 的 相关 知识 以 及 基本 测试 方法 ; 

避 了 解 注册 域名 、 申 请 空间 和 站 点 上 传 的 操作 方法 ; 

名 了 和 解 站 点 维护 与 推广 的 相关 知识 。 


10.1 站 点 测试 


网 站 制作 完成 后 ,需要 经 过 反复 测试 审核 ,修改 ,直到 无 误 后 才 可 以 正式 发 布 。 实 际 
上 ,在 网 站 建设 过 程 中 ,就 应 该 经 常 对 站 点 进行 测试 并 解决 所 发 现 的 问题 ,以 便 尽 早 发 现 
问题 ,避免 重复 出 错 。 在 对 站 点 进行 测试 时 ,应 该 注意 以 下 几 个 方面 的 问题 。 

(1) 在 不 同 的 浏览 器 .不同 的 分 辩 率 .不同 的 操作 系统 中 预览 站 点 页 面 ,查看 布局 , 颜 
色 字体 大 小 有 无 混乱 的 现象 。 

(2) 检查 站 点 是 否 有 断 开 的 链接 ,各 个 栏目 内 容 与 图 片 是 否 对 应 。 

(3) 监测 页 面 的 文件 大 小 以 及 下 载 这 些 页 面 所 占用 的 时 间 。 

(4) 验证 代码 ,以 定位 标签 或 语法 错误 。 

(5) 测试 是 否 按照 客户 要 求 进行 功能 实现 ;数据 库 是 否 链接 正常 ;各 个 动态 生成 链接 
是 否 正确 ;传递 参数 .内 容 是 否 正确 。 

(6) 测试 人 员 不 应 仅 限于 网 站 开发 人 员 ,应 适度 扩大 测试 范围 ,以 得 到 客观 、 全 面 的 
评价 。 

(7) 网 站 发 布 到 服务 器 之 后 还 需 进行 测试 ,主要 防止 因 环 境 不 同 导致 的 错误 。 


10.1.1 浏览 器 兼容 性 测试 


随 着 时 间 的 推移 ,IE、Firefox 和 Opera 等 浏览 器 对 CSS 的 支持 性 越 来 越 高 ,但 它们 
仍 在 符合 标准 的 基础 上 存在 差异 。 在 这 种 情况 下 ,网 页 设计 制作 人 员 只 有 不 断 地 进行 测 
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试 ,不 断 地 充分 了 解 各 个 浏览 器 才能 让 页 面 正确 显示 在 各 个 浏览 器 中 。 

Dreamweaver CS6 提供 的 浏览 器 兼容 性 检查 功能 可 以 帮助 设计 者 在 浏览 器 中 查找 
有 问题 的 HTML 和 CSS 部 分 ,并 提示 设计 者 哪些 标签 属性 在 浏览 器 中 可 能 出 现 问题 ,以 
便 对 文档 进行 修改 。 

默认 情况 下 ,浏览 器 兼容 性 检查 功能 可 以 对 Firefox 1. 5、Internet Explorer 6.0 和 7.0、 
Netscape Navigator 8.0、Opera 8.0 和 9.0 以 及 Safari 2.0 浏览 器 进行 兼容 性 检查 ,其 主 
要 步 又 如 下 。 

(1) 在 Dreamweaver CS6 中 打开 待 检查 的 网 页 文档 ,然后 在 菜单 栏 中 执行 “窗口 ?一 
“结果 ”一 “浏览 器 兼容 性 ”命令 ,打开 “结果 ”面板 。 

(2) 在 “结果 ”面板 中 ,选择 “浏览 器 兼容 性 ”选项 卡 ,然后 单 击 “ 结 果 ” 面 板 左 上 角 的 绿 
色 箭 头 ,在 弹出 的 子 菜单 中 选择 “设置 "选项 ,弹出 如 图 10-1 所 示 的 对 话 框 。 


Firefox 


Internet Explorer 
Netscape 

Dpera 

Safari 


图 10-1 “目标 浏览 器 "对话 框 


(3) 根据 实际 情况 ,选中 目标 浏览 器 旁边 的 复 选 框 , 对 于 每 个 选 定 的 浏览 器 ,从 相应 
的 下 拉 菜 单 中 选择 要 检查 的 最 低 版 本 ,最 后 单 击 “ 确 定 ” 按 钮 ,经 过 一 段 时 间 的 检查 ,软件 
将 检查 出 来 的 潜在 问题 罗列 在 窗 格 中 ,如 图 10-2 所 示 。 


二 雪 过 的 嫌 二 侵 称 《和 全 内 联 内 2 个 各 动 。 硕 
三 妆 末 的 本 避 和 和 oe ei 
三 雪 守 的 立 本 介 邦 


三 浊 雪 的 六 本 代称 pin 

三 时 的 让 亿 了 ei 

三 扩展 队 ET TT 的 村 斑 要 . 
了 加 


图 10-2 浏览 器 兼容 性 检查 


(4) 在 图 10-2 中 ,每 个 潜在 问题 前 面 都 有 一 个 填充 的 圆 ,用 于 表示 当前 错误 发 生 的 
可 能 性 ,四 分 之 一 填充 的 圆 表示 可 能 发 生 ,完全 填充 的 圆 表示 非常 可 能 发 生 。 双 击 检查 出 
来 的 潜在 问题 ,软件 将 自动 快速 定位 到 该 问题 所 在 位 置 , 供 设计 人 员 进 行 修改 。 


10.1.2 链接 的 测试 


在 浏览 网 页 的 时 候 , 读 者 一 定 都 遇 到 过 “无 法 找到 网 页 ”的 提示 ,出 现 此 现象 的 原因 一 
般 是 由 链接 文件 的 位 置 发 生变 化 、 被 误 删 除 或 者 文件 名 的 拼写 错误 而 造成 的 。 为 了 避免 
出 现 无 效 链接 的 尴 众 ,树立 良好 的 网 站 形象 .无论 是 发 布 前 的 本 地 测试 ,还 是 发 布 后 的 远 
程 测试 ,都 应 该 认真 地 检查 是 否 存在 失效 链接 ,以 便 及 时 修改 。 
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1. 检查 链接 
Dreamweaver CS6 提供 的 “检查 链接 ”功能 可 以 
检查 当前 打开 的 文件 ,本 地 站 点 的 某 一 部 分 或 者 整个 


EPE 半 |[ 本 地 视图 国 
于 G1S8 人 名 全 | 轩 
[于 大 个 [大 


本 地 站 点 中 断 开 的 链接 和 孤立 文件 ,具体 的 操作 方法 ie 
WR | 
疝 index. html 12KB 360sel| 


(1) 启动 Dreamweaver CS6, 在 “文件 ”面板 中 选 
择 需要 检查 链接 的 站 点 名 称 ,如 图 10-3 所 示 。 

(2) 在 菜单 栏 中 执行 “窗口 “结果 ”一 “链接 检 
查 器 "命令, 进入“ 结果” 面板 中 的 “链接 检查 器 ”选项 
卡 。 单 击 面板 左上 角 的 辆 按钮 ,根据 需要 在 弹出 的 子 ”图 103 选择 需要 检查 链接 的 站 点 
菜单 中 选择 对 应 的 选项 , 这 里 选择 “检查 整个 当前 本 
地 站 点 的 链接 "选项 。 稍 等 片刻 , 即 可 在 面板 中 看 到 检查 结果 ,如 图 10-4 所 示 。 


二 index2. htnl 12KB 360sey 
十 list html 15KB 360sel 
二 1listz.htnl 14KB 360seu 


Eee El 


图 10-4 检查 结果 


此 外 ,用 户 可 以 在 图 10-4 所 示 的 面板 中 “显示 ”下 拉 列 表 框 中 选择 要 检查 链接 的 
方式 。 

(1) 断 掉 的 链接 : 检查 文档 中 是 否 存 在 断 掉 的 链接 ,这 是 默认 选项 。 

(2) 外 部 链接 : 检查 稳定 中 的 外 部 链接 是 否 有 效 。 

(3) 孤立 文件 : 检查 站 点 中 是 否 存 在 孤立 文件 ,此 选项 只 有 在 检查 整个 站 点 时 才 被 
激活 。 


2. 修复 链接 

在 对 站 点 进行 链接 检查 后 ,用 户 可 以 直接 在 “链接 检查 器 ”面板 中 修复 链接 ,也 可 以 在 
属性 检查 器 中 修复 链接 。 这 里 以 修复 “ 断 掉 的 链接 ”为 例 进行 讲解 。 

(1) 在 “链接 检查 器 "面板 中 修复 链接 

在 “链接 检查 器 ”面板 中 的 “ 断 掉 的 链接 ” 列 内 ,选择 某 个 断 开 的 链接 。 此 时 ,可 以 在 
“ 断 掉 的 链接 ” 列 中 直接 输入 正确 的 链接 地 址 .或 者 单 击 链接 地 址 旁边 的 文件 夹 图 标 ,在 弹 
出 的 对 话 框 中 选择 正确 的 链接 地 址 ,如 图 10-5 所 示 。 

(2) 在 属性 面板 中 修复 链接 

在 “链接 检查 器 ”面板 中 ,双击 “文件 ” 列 中 的 需要 修复 链接 的 文件 名 称 。 此 时 ,软件 自 
动 打开 待 修复 链接 所 在 的 文档 ,并 在 属性 面板 中 高 亮 显示 路 径 和 文件 名 ,如 图 10-6 所 示 ， 
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总 共和 个 ,8 个 HTML，6 个 孤立 文件 。 总 失 562 个 链接 ,520 个 正确 ,62 个 断 接 ，0 个 外 部 许 接 
图 10-5 在 “链接 检查 器 ”面板 中 修复 链接 


[=1= 用 奈 外 
3 


10-6 在 “属性 ”面板 中 修复 链接 


在 “链接 ”文本 框 中 直接 输入 正确 的 链接 地 址 ,或 者 单 击 该 文本 框 右 侧 的 文件 夹 图 标 , 在 弹 
出 的 对 话 框 中 选择 正确 的 链接 地 址 即 可 。 


10.2 站 点 上 传 


网 站 制作 完成 后 ,需要 将 站 点 上 传 至 远 端 服 务 器 上 ,这 样 接 入 互联 网 的 所 有 用 户 都 可 
以 浏览 网 站 了 。 在 站 点 上 传 之 前 ,应 该 在 网 上 注册 一 个 域名 ,申请 一 定 的 空间 ,最 后 借助 
软件 工具 将 网 站 上 传 至 服务 器 上 。 


10.2.1 注册 域名 


域名 (Domain Name) 是 互联 网 上 的 一 个 服务 器 或 一 个 网 络 系统 的 名 字 , 它 由 一 串 用 
点 分 隔 的 名 字 组 成 ,在 全 世界 域名 具有 唯一 性 。 

国内 有 许多 正规 的 大 型 域名 申请 机 构 , 如 新 网 (http://www. xinnet. com/)、 万 网 
(http://www. net. cn/)、 新 网 互联 (http://www. dns. com. cn/) 和 35 互联 (http:// 
www. 35. com/) 等。 同样 ,国外 也 有 非常 著名 的 域名 申请 机 构 , 如 godaddy (http:// 
www. godaddy. com/) 和 enom(http://www. enom. com/) 等 。 

根据 我 国 互联 网 域名 管理 办 法 ,域名 注册 申请 者 应 当 提 交 真实 、 准 确 、 完 整 的 域名 注 
册 信 息 ,对 于 未 实名 验证 审核 的 国内 域名 ,域名 提供 机 构 将 暂停 域名 的 解析 功能 。 国 内 中 
英文 域名 注册 的 一 般 流程 如 图 10-7 所 示 。 

下 面 以 在 新 网 上 注册 域名 为 例 ,演示 注册 域名 的 具体 过 程 。 

(1) 登录 新 网 主页 , 单 击 页 面 导 航 栏 中 的 “域名 注册 ”文字 连接 ,进入 域名 注册 
页 面 。 

(2) 在 此 页 面 中 首先 要 选择 注册 域名 的 类 别 ,这 里 选择 . com. cn 类 别 , 该 类 别 的 价格 
为 100 元 /年 , 单 击 “ 购 买 ”按钮 后 ,进入 英文 域名 注册 页 面 。 
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登录 域名 提供 机 构 的 网 站 


UL 


查询 域名 


UL 


填写 域名 和 会 员 信 息 


支付 域名 使 用 费用 


U 


提交 资料 
1. 电子 文档 资料 发 送 至 域名 提供 机 构 
2. 书 面 资料 邮寄 至 域名 提供 机 构 


域名 提供 否 | 未 能 及 时 报 送 材料 或 
机 构 审核 通过 呈 一 >| 域名 申请 材料 审核 时 
不 符 全 条 件 的 ， 该 域 


[| 是 名 将 被 注销 ， 相 应 的 
注册 费用 退还 到 申请 
人 账号 中 


否 
CNNIC 审 核 通过 > 
|| 是 
vV 
注册 成 功 


图 10-7 域名 注册 的 一 般 流 程 


(3) 在 此 页 面 中 ,申请 人 需要 先 查 询 一 下 拟 注册 的 域名 是 否 已 经 被 注册 。 在 文本 框 
中 输入 要 查询 的 英文 域名 ,在 下 方 复 选 框 中 可 以 选中 多 个 类 型 ,最 后 单 击 “ 查 询 ” 按 钮 即 
可 ,如 图 10-8 所 示 。 查 询 结果 如 图 10-9 所 示 。 
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10-8 查询 域名 是 否 被 注册 
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所 有 者 详情 访问 该 网 站 >> 


图 10-9 域名 查询 结果 


(4) 在 域名 查询 结果 中 , 勾 选 要 注册 的 域名 ,并 单 击 后 方 的 “注册 ”文字 连接 ,进入 选 
择 价格 并 填写 信息 环节 。 

(5) 在 填写 完 各 种 资料 后 , 单 击 页 面 下 方 的 “注册 ”按钮 即 可 完成 形式 上 的 注册 。 此 
时 注册 的 域名 并 没有 生效 ,申请 人 还 需 将 有 关 资 料 原件 和 复印 件 邮寄 至 域名 注册 服务 提 
供 商 , 待 审 核 通 过 后 域名 才 真 正 注册 成 功 。 

需要 特别 提醒 的 是 ,目前 国内 英文 域名 和 国内 中 文 域名 仅 限 企 业 用 户 注册 ,个 人 用 户 
不 能 注册 。 


10.2.2 申请 网 站 空间 


网 站 空间 就 是 互联 网 中 存放 网 站 内 容 的 空间 。 购 买 网 站 空间 后 ,一般 注册 商会 给 空 
间 分 配 一 个 IP, 这 个 IP 就 是 域名 要 解析 到 的 IP。 


1. 网 站 空间 常见 形式 

目前 常见 的 网 站 空间 有 以 下 几 种 形式 。 

(1) 自 建 服务 器 

自 建 服务 器 这 种 形式 需要 较 高 水 平 的 软 硬 件 专 业 技术 人 员 ,要 投入 较 大 的 资金 购置 
软 硬 件 设 备 ,还 要 向 当地 Internet 接 和 人 商 支 付 价格 不 菲 的 日 常 维护 和 线路 通信 费 , 建 设 周 
期 相对 较 长 。 因 为 费用 昂贵 ,这 种 形式 适合 那些 有 实力 的 大 中 型 企业 和 专门 的 ISP 
(JInternet Service Provider ,互联 网 服务 提供 商 ) 。 

(2) 服务 器 托管 

与 自 建 服务 器 形式 不 同 ,服务 器 托管 是 将 自己 购置 的 服务 器 及 其 相关 设备 托管 到 具 
有 完善 机 房 设施 和 运营 经 验 的 网 络 数据 中 心 内 ,以 便 使 系统 达到 安全 可靠、 稳定 、 高 效 运 
行 的 目的 。 这 种 形式 适合 中 小 型 企业 使 用 。 

(3) 服务 器 租用 

服务 器 租用 这 种 形式 ,用 户 无 须 自己 购置 设备 ,而 是 租用 服务 商 提供 的 硬件 设备 ,由 
服务 商 负责 基本 软件 的 安装 .配置 ,并 保证 基本 服务 功能 正常 运行 。 相 对 于 前 两 种 方式 ， 
服务 器 租用 方式 的 费用 有 所 降低 ,适合 中 小 型 企业 使 用 。 

(4) 虚拟 主机 

虚拟 主机 指 的 是 把 一 台 运 行 在 互联 网 上 的 真实 主机 资源 ,划分 成 多 个 “虚拟 ”的 服务 
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器 ,每 一 个 虚拟 主机 都 具有 独立 的 域名 和 完整 的 Internet 


登录 虚拟 主机 服务 提供 商 主页 


服务 器 功能 ,每 个 用 户 承 受 的 硬件 费用 、 网 络 维护 费用 、 通 


U 


信 线 路 的 费用 都 大 幅度 降低 。 它 是 目前 最 常见 的 网 站 空 


选择 主机 类 型 


间 形 式 。 


U 


2. 虚拟 主机 购买 的 一 般 流程 
虚拟 主机 的 购买 一 般 包 括 注 册 和 开通 两 个 阶段 。 首 


阅读 虚拟 主机 合同 
填写 购买 人 相关 信和 


[a 


先 , 按 照 网 站 空间 服务 提供 商 的 要 求 填写 相关 信息 ,然后 


根据 实际 需要 选择 服务 提供 商 所 提供 的 不 同类 型 的 产品 ， 


支付 费用 ， 开 通 主机 


待 确定 好 所 需要 的 产品 类 型 并 缴纳 所 需 费 用 后 即 可 开通 
网 站 空间 ,流程 图 如 图 10-10 所 示 。 虚 拟 主 机 开通 后 ,还 


登录 虚拟 主机 管理 系统 
设置 相关 信息 ， 上 传 网 页 


需 登 录 服 务 商 提供 的 虚拟 主机 管理 系统 将 之 前 申请 的 域 
名 与 主机 绑 定 ,如 图 10-11 所 示 , 这 样 任何 人 就 可 以 通过 图 
域名 访问 站 点 了 。 


10-10 ”购买 虚拟 主机 的 流程 
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图 10-11 35 互联 的 虚拟 主机 管理 系统 


10.2.3 站 点 上 传 


站 点 上 传 就 是 将 通过 测试 后 的 网 站 复制 到 远程 Web 服务 器 的 过 程 , 这 样 访问 者 才能 
通过 浏览 器 浏览 存储 于 服务 器 上 的 网 页 。 上 传 站 点 一 般 是 通过 FTP 类 软件 连接 到 
Internet 服务 器 后 进行 上 传 的 ,当然 也 可 以 通过 Dreamweaver 的 站 点 管理 器 上 传 网 页 。 


1. 通过 Dreamweaver 上 传 


通过 Dreamweaver 将 本 地 站 点 上 传 至 远程 服务 器 上 ,需要 在 传输 之 前 对 站 点 服务 器 


进行 相关 设置 ,具体 操作 如 下 所 示 。 


(1) 启动 Dreamweaver CS6 ,在 “文件 ?面板 中 的 “文件 ?下 拉 列 表 框 中 选择 需要 上 传 
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的 站 点 名 称 。 
(2) 在 菜单 栏 中 执行 “站 点 ”一 “管理 站 点 ”命令 ,打开 ”管理 站 点 "对话 框 , 如 图 10-12 
所 示 。 


混凝土 结构 工程 施工 媒体 库 


图 10-12 “管理 站 点 ”对 话 框 


(3) 在 “管理 站 点 "对话 框 中 ,选择 要 上 传 的 站 点 名 称 , 然 后 单 击 “ 编 辑 " 按 钮 。 
(4) 此 时 弹出 * 站 点 设置 对 象 "对 话 框 。 在 此 对 话 框 左 侧 列表 中 选择 “服务 器 ?选项 ， 
如 图 10-13 所 示 。 


图 10-13 站 点 设置 对 象 一 一 服务 器 


(5) 在 图 10-13 所 示 的 对 话 框 中 , 单 击 “ 添 加 新 服务 器 ”按钮 瑚 ,或 者 选择 一 个 现 有 的 
服务 器 ,然后 单 击 “ 编 辑 现 有 服务 器 ”按钮 居 , 即 可 对 服务 器 进行 设置 。 这 里 单 击 “ 添 加 新 
服务 器 "按钮 思 , 添 加 一 个 新 服务 器 ,此 时 弹出 如 图 10-14 所 示 的 对 话 框 。 
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图 10-14 设置 参数 


(6) 在 该 对 话 框 的 “服务 器 名 称 ” 文 本 框 中 输入 新 服务 器 的 名 称 。 在 “连接 方法 ”下 拉 
列表 框 中 选择 FTP 选项 ,并 在 下 方 的 “FTP 地 址 ”用户 名 ”和 “密码 ”文本 框 中 输入 相关 
信息 。 在“ 根 目录 ”文本 框 中 ,输入 远程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 。 设 置 
完成 的 参数 界面 如 图 10-15 所 示 。 


218.198.57.196 [2 


ww 


ww | 
mw 加 


http://218.198.57.166/ 


图 10-15 ”参数 设置 完成 


(7) 为 保证 能 成 功 连接 到 服务 器 , 单 击 “测试 ”按钮 ,测试 FTP 地 址 、 用 户 名 和 密码 是 
和 否 正确 ,测试 过 程 如 图 10-16 所 示 的 对 话 框 。 


图 10-16 正在 连接 Web 服务 器 
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(8) 如 果 还 需 设置 更 多 选项 , 单 击 “ 更 多 选项 ”文字 链接 进一步 设置 ,这 里 保持 默认 设 
置 即 可 。 

(9) 待 服务 器 测试 成 功 后 , 单 击 “ 保 存 ” 按 钮 ,返回 “站 点 设置 对 象 对 话 框 。 根 据 需 要 
在 “服务 器 ”类别 中 ,指定 刚 添加 的 服务 器 为 远程 服务 器 、 测 试 服务 器 ,还 是 同时 为 这 两 种 
服务 器 ,如 图 10-17 所 示 。 待 所 有 设置 完成 后 , 单 击 “保存 ”按钮 ,返回 软件 主 界面 。 


10-17 指定 服务 器 类 型 


(10) 在 “文件 ?面板 中 , 单 击 “ 连 接 到 远 端 主机 ?按钮 ,如 图 10-18 所 示 , 即 可 连接 到 服 
务 器 。 


展开 以 显示 本 
地 和 远 端 站 点 


剧 下 上 取 存 同 
新 载 传 出 回 步 


图 10-18 相关 上 传 的 按钮 


为 了 更 加 直观 地 进行 上 传 操作 , 单 击 " 展 开 以 显示 本 地 和 远 端 站 点 "按钮 。 此 时 ,软件 
整个 界面 变 为 两 个 窗 格 的 布局 , 左 侧 窗 格 用 于 显示 远程 服务 器 中 的 文件 目录 , 右 侧 窗 格 用 
于 显示 本 地 文件 的 目录 。 在 右 侧 窗 格 中 选择 整个 站 点 或 某 些 文件 , 单 击 * 上 传 " 按 钮 徊 , 即 
可 将 文件 上 传 到 服务 器 中 ,如 图 10-19 所 示 。 

如 果 需 要 从 远 端 站 点 下 载 某 些 文件 ,可 将 它们 从 “远程 服务 器 " 窗 格 中 拖 放 到 “本 地 文 
件 " 窗 格 中 ,或 者 单 击 “ 下 载 " 按 钮 即 可 。 另 外 ,由 于 网 络 速度 的 不 同 ,上 传 或 下 载 全 部 站 点 
文件 需要 经 过 一 段 时 间 的 等 待 。 


2. 通过 FTP 类 软件 上 传 
通过 FTP 类 软件 (如 CuteFTP、FlashFXP 和 LeapFXP 等 ) 上 传 文件 是 常用 的 上 传 
方式 , 它 不 仅 效率 高 ,支持 断 电 续 传 ,可 以 跳 过 指定 的 文件 类 型 ,还 可 以 缓存 远 端 文件 夹 列 
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图 10-19 站 点 管理 窗口 


表 , 具 有 避免 空闲 等 多 种 功能 ,对 于 上 传 那些 内 容 较 多 的 文档 非常 便利 。 下 面 详细 介绍 使 
用 FlashFXP 上 传 文件 的 操作 方法 。 

(1) 启动 FlashFXP ,在 菜单 栏 中 执行 “站 点 ">“ 站 
点 管理 器 ”命令 ,打开 “站 点 管理 器 ”窗口 。 单 击 窗口 左 
下 角 的 “新 建站 点 ”按钮 ,在 弹出 的 “创建 新 的 站 点 ”对 话 
框 中 输入 站 点 名 称 myweb, 如 图 10-20 所 示 。 

(2) 单 击 “ 确 定 ” 按 钮 ,返回 到 “站 点 管理 器 "窗口 。 
选择 刚才 新 建 的 站 点 ,输入 IP 地 址 ,用 户 名 称 、 密 码 等 信息 ,然后 单 击 “ 应 用 ”按钮 ,如 
图 10-21 所 示 。 单 击 “ 连 接 ” 按 钮 , 即 可 连接 到 远程 站 点 。 


创建 新 的 站 点 


站 点 名 称 
nye 


亡 旺 | 
图 10-20 输入 站 点 名 称 
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10-21 输入 站 点 信息 
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(3) 连接 成 功 后 ,在 界面 的 左 侧 窗 格 中 选择 需要 上 传 的 文件 或 文件 夹 , 右 击 , 在 弹出 
的 右键 菜单 中 选择 “传输 ”命令 ,或 者 直接 将 选中 的 文件 或 文件 夹 拖 放 到 右 侧 窗 格 远程 服 
务 器 相应 的 目录 下 ,如 图 10-22 所 示 。 
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图 10-22 正在 上 传 文件 


至 此 ,通过 Dreamweaver 上 传 的 方法 和 使 用 FTP 类 软件 上 传 的 操作 方法 已 经 介绍 
完了 ,更 多 的 操作 过 程 这 里 不 再 袭 述 ,读者 可 亲自 体会 学 习 。 


10.3 ”维护 与 推广 


随 着 网 络 应 用 的 深入 和 网 络 营销 的 普及 ,网 站 建设 并 非 一 次 性 投资 建立 一 个 网 站 那 
么 简单 ,更 重要 的 工作 在 于 网 站 建成 后 的 长 期 维护 、 更 新 及 推广 过 程 。 


10.3.1 站 点 维护 


网 站 的 维护 是 一 项 专业 性 较 强 的 工作 ,其 维护 的 内 容 种 类 也 非常 多 ,如 页 面 修改 、 功 
能 改进 \ 安 全 管理 ,资料 备份 .网 站 推广 等 。 


1. 服务 器 及 相关 硬件 的 维护 

服务 器 .路 由 器 和 交换 机 以 及 通信 设备 是 网 络 的 关键 设备 ,对 这 些 硬件 的 维护 主要 是 
对 硬件 的 运行 状况 进行 监控 ,以 确保 网 站 的 24 小 时 不 间断 正常 运行 ,发 现 运行 问题 及 时 
解决 。 

相对 于 普通 PC 来 说 ,服务 器 在 稳定 性 、 安 全 性 \ 性 能 等 方面 都 要 求 更 高 ,CPU、 属 片 
组 .内 存 、 磁 盘 系统 、 网 络 等 硬件 和 普通 PC 有 所 不 同 。 而 放置 这 些 硬件 设备 的 机 房 要 保 
持 室 内 正常 的 温度 和 湿度 以 及 良好 的 通风 性 ,并 确保 电力 系统 的 正常 运转 ,因为 这 些 因素 
将 影响 到 服务 器 散热 和 人 性 能 的 正常 发 挥 。 
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2. 操作 系统 的 维护 

操作 系统 并 不 是 绝对 安全 的 ,服务 器 操作 系统 的 设置 是 否 合理 是 网 站 能 否 长 期 良好 
运行 的 保证 。 维 护 操作 系统 的 安全 必须 及 时 为 系统 更 新 升级 ,操作 系统 中 的 软件 应 该 遵 
循 少 而 精 的 原则 ,这 样 不 仅 可 以 防止 各 个 软件 之 间 相 互 冲突 ,还 可 以 避免 因 软 件 存在 漏洞 
而 引起 被 攻击 的 危险 。 


3. 数据 备份 

服务 器 零件 损坏 . 断 线 或 者 被 黑客 攻击 ,在 实际 的 网 络 环境 中 没有 人 能 够 保证 系统 不 
出 现任 何 安全 问题 ,这 时 数据 的 备份 与 恢复 就 显得 十 分 重要 。 对 于 那些 经 常 更 新 的 网 站 
来 说 ,定期 备份 更 为 重要 ,在 无 人 值守 的 环境 下 ,通过 FTP 自动 备份 网 站 数据 ,能 够 确保 
网 站 “有 备 无 患 ”。 


4. 网 站 内 容 更 新 

由 于 搜索 引擎 对 新 的 信息 非常 敏感 ,所 以 只 有 不 断 地 更 新 内 容 , 才 能 保证 网 站 的 生命 
力 , 进 而 获得 更 为 长 久 的 利益 。 网 站 内 容 更 新 的 越 多 越 快 ,搜索 引擎 会 认为 网 站 生机 勃 
勃 , 在 提供 给 搜索 者 信息 的 时 候 , 搜 索引 擎 会 认为 网 站 值得 推荐 ,自然 被 排 在 搜索 结果 的 
前 列 。 以 企业 型 网 站 为 例 说 明 网 站 内 容 更 新 需要 注意 的 内 容 。 

(1) 更 新 企业 动态 、 完 善 相 关内 容 。 

(2) 网 站 原 有 栏目 内 容 的 增添 与 完善 。 网 站 建设 初期 ,企业 对 网 站 的 投资 可 能 并 不 
大 ,但 随 着 网 站 的 运行 与 推广 ,企业 肯定 会 考虑 增添 某 些 功 能 或 添加 更 多 的 产品 或 服务 
信息 。 

(3) 风格 和 版 面 布 局 的 更 新 调整 。 风 格 是 一 个 网 站 或 企业 形象 ,风格 最 好 不 要 频繁 
变动 ,但 这 并 不 意味 着 永远 不 变 。 风 格 和 版 面 布局 调整 ,可 以 是 全 部 改版 更 新 ,也 可 以 是 
局 部 栏目 、 局 部 页 面 上 的 改进 。 

(4) 产品 信息 的 更 新 。 随 着 企业 的 发 展 ,肯定 会 有 新 产品 、 新 服务 推出 。 此 外 ,销售 
价格 、 销 售 策略 ,促销 信息 等 内 容 也 都 需要 及 时 更 新 。 

(5) 及 时 回复 客户 留言 与 疑问 的 解答 。 


10.3.2 网 站 推广 


网 站 推广 是 指 通过 一 定 的 技术 和 方法 将 网 站 推广 出 去 ,达到 一 定 的 知名 度 ,进而 产生 
经 济 效益 。 常 见 的 网 站 推广 方案 有 以 下 几 个 方面 。 


1. 大 众 传媒 推广 
大 众 传媒 主要 包括 电视 、 户 外 广告 .报纸 杂志 以 及 其 他 印刷 品 等 内 容 , 利 用 这 些 手 段 
能 够 让 客户 在 短 时 间 内 加 深 对 网 站 的 了 解 。 


2. 搜索 引擎 推广 

搜索 引擎 推广 是 指 利用 搜索 引擎 、 分 类 目录 等 具有 在 线 检索 信息 功能 的 网 络 工具 进 
行 网 站 推广 的 方法 。 这 种 推广 方法 又 有 多 种 不 同 的 形式 ,常见 的 有 : 搜索 引擎 优化 ,关键 
词 广告 .关键 词 竞 价 排名 、 网 页 内 容 定位 广告 等 。 
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3. 电子 邮件 推广 

这 种 推广 的 方法 主要 以 电子 邮件 的 方式 ,将 会 员 通信 、 电 子 刊物 等 广告 发 送 给 用 户 ， 
增强 与 客户 的 关系 ,提高 品牌 的 忠诚 度 。 但 是 未 经 用 户 许可 的 滥 发 邮件 ,必定 给 用 户 留 下 
不 好 的 印象 ,对 提升 网 站 的 访问 量 没有 实质 性 帮助 。 


4. 交换 链接 推广 

交换 链接 是 最 简单 的 一 种 合作 方式 ,也 是 新 兴 网 站 推广 的 有 效 方式 之 一 。 它 在 具有 
互补 优势 的 网 站 之 间 建 立 起 简单 的 合作 形式 ,分 别 在 自己 的 网 站 上 放置 对 方 网 站 的 
LOGO 或 网 站 名 称 并 设置 对 方 网 站 的 超 链接 ,使 得 用 户 可 以 从 合作 网 站 中 发 现 自己 的 网 
站 ,达到 互相 推广 的 目 。 


5. 微 信和 ,博客 和 二 维 码 推广 

在 微 信和 博客 中 发 表 观 点 是 一 种 很 好 的 宣传 网 站 的 方式 。 另 外 ,智能 手机 和 条 形 码 
或 二 维 码 扫 描 应 用 被 广泛 采用 后 ,利用 二 维 码 的 消费 者 大 大 增加 ,利用 二 维 码 传递 站 点 信 
息 也 是 非常 好 的 做 法 。 


10.4 习题 


. 站 点 测试 主要 包含 哪些 内 容 ? 

. 如何 使 用 Dreamweaver 实现 文件 上 传 ? 
. 网 站 空间 的 常见 形式 有 哪些 ? 

. 什么 是 虚拟 机 租用 ? 

. 简 述 站 点 维护 的 主要 内 容 。 

. 网 站 推广 的 方法 有 哪些 ? 


-0 


第 11 章 


综合 案例 解析 一 一 电子 商务 网 站 


【本 章 导 读 】 

本 章 以 设计 并 实现 电子 商务 类 网 站 的 前 台 过 程 为 依托 ,将 整 本 教材 的 知识 汇总 、 串 
接 , 侧 重 知识 的 迁移 和 设计 思路 的 延续 。 

【学 习 目标 】 

二 了 解 建设 网 站 前 的 相关 工作 ; 

名 掌握 页 面前 期 布局 规划 的 思路 和 方法 ; 

名 能 够 掌握 网 站 静态 页 面 开 发 的 全 过 程 。 


11.1 电子 商务 网 站 的 简易 需求 分 析 


在 进行 网 站 设计 之 前 需要 对 网 站 的 系统 功能 进行 详细 分 析 , 以 确保 最 终 网 站 能 够 符 
合 客户 需求 。 

1. 网 站 简 述 

电子 购物 网 站 是 集 商品 展示 、 商 品 搜索 、 商 品 购买 于 一 体 的 大 型 网 站 ,具有 品种 齐全 、 
功能 完善 ,操作 简便 等 优点 。 

2. 需求 分 析 

(1) 购物 网 首页 

展示 网 站 总 体 布 局 ,发挥 导航 作用 。 它 包括 商品 分 类 模块 个 人 登录 模块 .最 新 消息 
模块 .最 新 商品 推荐 模块 .特价 商品 模块 人气 商 品 模块 .商品 搜索 模块 .商品 排行 模块 等 。 
以 上 模块 便于 顾客 了 解 购物 网 站 的 主要 功能 ,为 顾客 提供 方便 快捷 的 操作 。 

(2) 商品 搜索 页 

电子 购物 网 站 中 的 商品 对 于 顾客 来 讲 无 异 于 一 个 商品 的 海洋 ,要 想 在 众多 产品 
中 选择 符合 客户 意愿 的 商品 ,商品 搜索 功能 必 不 可 少 。 顾 客 可 以 通过 输入 关键 字 进 
行 快速 查找 ,检索 自己 需要 的 商品 ,这 些 商品 以 列表 的 形式 展现 在 顾客 面前 , 供 顾客 
筛选 。 

(3) 商品 展示 页 面 

顾客 如 果 想 要 查看 商品 的 详细 信息 ,就 需要 进入 商品 展示 页 面 。 该 页 面包 含 商 品 的 
各 种 详细 信息 ,顾客 可 以 根据 商品 的 展示 说 明 来 选择 是 否 购买 。 
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(4) 性 能 需求 
由 于 整个 网 站 涉及 大 量 的 商品 信息 以 及 用 户 信息 发 布 ,要 求 信息 登录 修改、 删除 操 


作 延 迟 时 间 短 。 搜 索 操作 要 求 得 到 大 量 数据 结构 时 延迟 不 能 太 长 。 


11.2 电子 商务 网 站 的 布局 分 析 


“ 宇 泽 美食 "是 以 在 线 销售 各 类 美食 为 主 的 购物 平台 ,主要 包括 主页 面 、 搜 索 页 面 和 产 
品 详细 信息 页 面 三 部 分 ,这 里 针对 这 三 个 页 面 进行 分 析 。 


1. 主页 面 布 局 规划 
主页 面 应 该 包括 网 站 的 Logo、 导 航 、 产 品 搜索 框 \. 个 人 账户 、 产 品 分 类 、 部 分 产品 推 


荐 ,以 及 广告 位 等 栏目 。 通 过 成 熟 的 构思 与 设计 ,“ 宇 泽 美食 ”主页 面 最 终 效果 如 图 11-1 
所 示 ,布局 如 图 11-2 所 示 。 
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4 
字 泽 美食 2 
图 11-1 主页 最 终 效果 


2. 搜索 页 面 布 局 规划 


243、 


搜索 页 面 是 访问 者 在 搜索 栏 中 输入 关键 字 后 ,通过 系统 搜索 找 出 符合 条 件 的 产品 列 
表 页 面 。 通 过 成 熟 的 构思 与 设计 ，“ 宇 泽 美食 ?搜索 页 面 最 终 效果 如 图 11-3 所 示 ,布局 如 


图 11-4 所 示 。 
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wrapper 


header 
logo header right 


content 
left_sidebar || right_content 


search banner 


content_title_bar 


left_content 


content_title_bar 


content_title_bar 


footer 


图 11-2 主页 面 布局 示意 图 


和 这 4 帝 亲 7509 。 站 计 和 芝 杀 7s6g 。。 首 入 和 荣 各 2509 


a9 sol29 80029 P020 


站 寺 和 学 各 209 


| 


#0 20 


站 过 和 过 各 ?500 


11-3 ”搜索 页 页 面 最 终 效果 


3. 产品 详细 信息 页 面 布局 规划 
产品 详细 信息 页 面 是 访问 者 查看 具体 产品 时 显示 的 页 面 ,通过 成 熟 的 构思 与 设计 ， 
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wrapper 
header 
logo header right 
content 
left_sidebar || right_content 
Search sub_banner 
content_title_bar 
left_content 


footer 


图 11-4 搜索 页 页 面 布局 示意 图 
“ 宇 泽 美食 ”产品 详细 信息 页 面 最 终 效果 如 图 11-5 所 示 ,布局 如 图 11-6 所 示 。 


宇 泽 美 食 
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和 人 在 元 入 和 阴 生 ， 梧 代 其 科 四 1 光 0 了 和， 村 六 8 中- 


图 11-5 产品 详细 信息 页 面 最 终 效果 


46 网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 
wrapper 


header 
logo header right 
content 
left_sidebar || right_content 
search sub_banner 


content title_bar 


left_content 


pro_info 


pro_jieshao 


footer 


11-6 产品 详细 信息 页 面 布局 示意 图 


11.3 实现 过 程 


在 制作 页 面 之 前 ,首先 定义 站 点 ,以 方便 对 站 点 内 文件 进行 管理 和 操作 。 其 次 ,在 站 
点 中 创建 images 和 style 两 个 文件 夹 , 用 于 放置 图 片 和 样式 文件 。 最 后 新 建 index. html 
文档 和 style. css 文档 ,并 将 两 个 文档 链接 起 Easy a sress piocraore, ifrone, vi, ol 


dl, dt, dd, 1i, dl, hil, h2, h3, h4, pre, table, 


来 。 在 完成 了 这 些 准备 工作 以 后 ,下 面 分 别 对 |caption, th, ta, form, legend, fieldset, input, 


button, select, textarea { 


各 个 页 面 的 布局 实现 进行 讲解 。 margin: 0; 


padding: 0; 


font-style: normal; 
| | 主页 的 实现 font: 12px/1.5 Arial, Helvetica, sans-serif; 


ol, ul, 1i (list-style: none;) 


1. 页 面 头 部 区 域 的 制作 ee 


border: 0; 


《1 在 style. css 文件 中 ,创建 CSS 初始 vertical-align; middle; 
化 规则 ,如 图 11-7 所 示 。 et 
(2) 将 光标 置 于 设计 视图 中 ,在 插入 面板 | “coo; #000000; 
的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 "按钮 小 text-decoration: none; 


国 , 弹 出 “插入 Div 标签 "对 话 框 。 在 “插入 ”下 | Color: sanzeae: 


text-decoration: underline; 


拉 列 表 框 中 选择 “在 插入 点 "选项 ,在 ID 框 中 小 


boay < 


输入 wrapper 单 击 "确定 "按钮 , 即 可 在 页 面 cae soooene 
中 插入 wrapper 容器 。 切 换 到 style. css 文件 人 
中 ,创建 相关 CSS 规则 ,如 图 11-8 所 示 。 


(3) 删除 wrapper 容器 内 多 余 的 文字 ,在 


11-7 CSS 初始 化 规则 
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11-8 ”wrapper 容器 的 CSS 规则 


该 容器 内 部 使 用 header 元 素 插入 一 个 名 为 page_header 的 容器 。 在 page_header 容器 内 
部 ,依次 创建 名 为 logo 和 header_right 的 DIV 容器 ,并 插入 图 像 和 相关 文字 内 容 , 具 体 页 
面 结构 如 图 11-9 所 示 。 


body> 
<aiv id="wrapper"> 
<header id="page header"> 
<div id="logo">cimg src="images/logo.jpg" width="240" height="90" /></div> 
<div id="header right"> 
<div id="top"><a href="#"> 我 的 账户 </a><span>1</span><a href="#"> 付 款 方 式 </a><span>1</span><a 
hrer="#"> 最 新 消息 </a><span>1</span><a href="#"> 帮 助 中 心 </a><span>1</span> 咨 调 热 线 :400-686-1234</div> 
</div> 
</header> 
</div> 
</body> 


图 11-9 page_header 容器 的 内 容 


(4) 在 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-10 所 示 。 切 换 回 设计 页 面 ,页 
面 效果 如 图 11-11 所 示 。 


(5) 在 top 容器 的 后 面 使 用 nav 元 素 插入 名 为 page_ [ae 


width: 1000px; 


nav 的 容器 ,再 利用 无 序列 表 在 该 容器 内 部 搭建 导航 栏 ， 2 的 0 
具体 结构 如 图 11-12 所 示 。 返回 style. css 文件 中 ,创建 相 ee i 
关 CSS 规则 ,如 图 11-13 所 示 。 hr 390 

2. 主页 左 侧 导航 的 制作 i 

(1) 将 光标 定位 在 设计 视图 中 , 单 击 * 插 入 ?面板 的 ee ey 
“插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 标签 "对话 框 ,在 batone: sp 
“插入 ”下拉 列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 De 
下 拉 列 表 框 中 选择 二 header id 一 "page_header" 选项 ， et et 
在 ID 框 中 输入 content, 单 击 “ 确 定 ” 按 钮 , 即 可 在 page_ peeroromd: tons 
header 容器 后 面 插入 content 容器 ,如 图 11-14 所 示 。 a 

(2) 在 content 容器 内 部 使 用 section 元 素 创建 名 为 padding-left: Spx; 


padding-right: Spx; 


left_sidebar 的 容器 ,此 时 页 面 结构 如 图 11-15 所 示 。 返 回 
style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-16 所 示 。 ”图 11-10 页 面 头 部 的 CSS 规则 


YUZE F00D 


图 11-11 页 面 头 部 的 预览 效果 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


pody> 


</div> 
</body> 


Fboay> 


<div id="wrapper"> 
<header id="page header"> 


xdiv id="l0go">Rinmg sr:::]</div> 
<div id="header right"> 
<div id="top">Ka href..:]</div> 


<nav id="page nav"> 
<ul> 


</ul> 
</nav> 
</div> 
</header> 


<1li><a href="#"> 首 页 </a></1i> 

<1li><a href="#"> 宇 泽 故 事 </a></1i> 
<1i><a href="#"> 购 物 指南 </a></1i> 
<1i><a href="#"> 美 食 政 党 </a></1i> 
<1li><a href="#"> 新 品 上 架 </a></1i> 
> 特色 专区 </a></1i> 
<li><a href="#"> 订 阅 邮件 </a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
<1i><a href=-"#"> 送 货 地 区 </a></1i> 


11-12 搭建 导航 


插入 [在 标签 之 后 |[<header id="page-h ] 
类 : bd R 
ID: content ” 


新 建 CSS 规则 | 


图 11-14 插入 content 容器 


<div id="wrapper"> 
<header id="page header"> 


而 


</header> 


<div id="content"> 
<secrion id="left sidebar"> </section>| 


图 11-15 创建 left_sidebar 容器 


图 11-16 


age nav 1 
width: 750px; 
height: 60px; 
background: #d9cab2;| 

} 

#page nav ul { 
padding: 20px 15px 

} 

#page nav ul 1i{ 
float: left; 
margin-left: 18px; 

} 

#page nav ul liat 
color: #462323; 
font-size: 16px, 
font-family: 


#content { 
width:1000px; 
float:left; 

} 

#left sidebar { 
width:240px; 
height:500px; 
float:left; 


left_sidebar 的 CSS 规则 


(3) 在 left_sidebar 容器 内 部 插入 名 为 search 的 DIV 容器 ,用 于 制作 商品 搜索 栏 。 
在 该 容器 内 部 插入 表单 域 . 文 本 字段 和 按钮 ,具体 页 面 结构 如 图 11-17 所 示 。 切 换 到 
style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-18 所 示 。 保 存 当 前 文档 ,预览 后 的 效果 如 


图 11-19 所 示 。 


(4) 将 光标 定位 在 二 div id 一 "search" 二 二 /div 过 标签 的 后 面 , 使 用 nav 元 素 创 建 名 
为 left_nav 的 容器 。 
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#search { 
background:#f£7f7f7; 
padding:20px 10px; 


} 
#searchtext { 

height:20px; 
} 
#button { 

color:#000; 

background:#ffc850; 

font:bold llpx Arial, Helvetica, 
sans-serif; 

text-decoration:none; 

margin-left:10px; 

border:1lpx solid #5b7a92; 


dlv 1d="content™S> 
<section id="left sidebar"> 
<div id="search"> 
<form action="" method="get" > 
<input name="searchtext" type="text" 
class="newsletter input" id="searchtext" value= 
"keyword" size="25"/> 
<input type="submit" name="button" id= 
"button" class="button" value=" 搜 索 " /> 


} 

#button:hover { 
cursor:pointer; 
Color:#fff; 


a background:#663300; 
</section> border:1lpx solid #ffc850; 
</div> } 
图 11-17 商品 搜索 栏 的 页 面 结构 11-18 商品 搜索 栏 的 CSS 规则 


(5) 在 left_nav 容器 内 部 ,依次 创建 应 用 sider_title_box 类 规则 的 DIV 容器 ,以 及 应 
用 left_menu 类 规则 的 无 序列 表 , 用 于 实现 左 侧 商品 分 类 导航 栏 ,具体 页 面 结 构 如 
图 11-20 所 示 。 


div id="content™> 
<section id="left sidebar"> 


<div id="search"> 
<form ... 
</div> 
<nav id="left nav"> 
<div class="sider_ title_box"> 进 口 商品 c/div> 
<ul class="left menu"> 
<1i><a href="#"> 进 口 牛 奶 c/a></11i> 
<1i><a href="#"> 进 口 坚果 </a></1i> 
<1i><a href="#"> 进 口 咖 啡 </a></1i> 
<1i><a href="#"> 粹 果 巧 克 力 </a></1i> 
<1i><a href="#"> 进 口 窗 钱 </a></1i> 
<1li><a href="#"> 进 口 及 化 </a></1i> 
</ul> 
<div class="clear"></div> 


</nav> 
keyword EE </section> 
</div> 


图 11-19 商品 搜索 栏 的 预览 效果 图 11-20 左 侧 商 品 分 类 导航 栏 的 页 面 结构 


(6) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-21 所 示 。 保 存 当 前 文档 ， 
预览 后 的 效果 如 图 11-22 所 示 。 

(7) 将 光标 定位 在 图 11-20 所 示 的 二 div class 王 "clear" 二 二 /div 二 标签 后 面 , 在 当前 
位 置 插 入 应 用 sider_title_box 类 规则 的 DIV 容器 ,以 及 应 用 left_menu 类 规则 的 无 序列 
表 , 如 图 11-23 所 示 。 由 于 之 前 已 经 创建 了 对 应 的 类 规则 ,这 里 当 页 面 结 构 创 建 完成 时 ， 
页 面 效 果 自 动 呈现 出 来 .如 图 11-24 所 示 。 

(8) 将 光标 定位 在 图 11-23 中 到 div class 一 "clear" 之 过 /div 之 标签 后 面 ,在 当前 位 置 
插入 应 用 sider_title_box 类 规则 的 DIV 容器 ,以 及 应 用 guide 类 规则 的 DIV 容器 ,将 预 
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-sider titie box 1 
background: 

url (images/sider title box bg.gif)| 

no-repeat left bottom; 

height:25px; 

width:230px; 

font-size:16px; 

Color:#663366; 

padding-left:10px; 

font-family: "黑体 "; 


} 
ul .left_menu { 
padding:10px; 
} 
ul.left menu 1i { 
float:left; 
margin-left:Spx; 


} 
局 menu | 

th 宇 学 美食 

YUZE FOOD 


height:25px; 

line-height:25px; 

display:block; 

border-bottom:1px #e4e4e4 |keyword 
dashed; 

color:#504b4b; 

padding-left:10px; 


} . 
ul.left menu li a:hover { i 

background: 进口 咖 非 
url (images/a_ hover bg.gif) 进口 鹤 赋 


no-repeat left center; 
} EX-Vindex 抓 … 


图 11-21 左 侧 商品 导航 栏 的 CSS 规则 


YUZE FOOD 
eyword E23 
| 进口 商品 
进口 牛奶 进口 坚果 
<nav id="left nav"> 
ry 功力 
<div class="sider title_box"> 进 口 商 品 c</div> = i 
<ul class="left menu"> 进口 胞 化 
Xliyca... 
</u1> 


<div class="clear"></div> 
<div class="sider_title_box"> 茶 咖啡 冲 饮 </div> 
left_menu"> 


</al> 
<div class="clear"></div> 
<div class="sider_title_box"> 生 鲜 水 果 </div> 
<ul class="left menu"> 
SEEX 了 要 
</al> 
<div class="clear"></div> 
</nav> 


图 11-23 继续 添加 左 侧 商品 导航 栏 内 容 的 页 面 结构 图 11-24 添加 更 多 内 容 后 的 预览 效果 
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先 准 备 好 的 图 像 插 入 其 中 ,其 结构 如 图 11-25 所 示 。 


(9) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-26 所 示 。 保 存 当 前 文档 ， 
预览 后 的 效果 如 图 11-27 所 示 。 


<diV class="clear"></div> 
<div class="sider_title_box"> 站 内 向 导 c/div> 
<div class="guide"> <img src="images/guide 01.jpg"| 


-guide 1 
width="240" height="71" /></div> 由 . 
<div class="guide"><img src="images/guide 02.jpg" height :80px; 
[ridth="240" height="71" /></div> margin:10px 0; 
<div class="clear"></div> } 
11-25 插入 图 像 11-26 图 像 的 CSS 规则 


3. 主页 右 侧 主体 区 域 的 制作 


(1) 将 光标 定位 在 二 section id 一 "left_sidebar" 二 二 /section 二 标签 的 后 面 , 使 用 
section 元 素 创建 名 为 right_content 的 容器 。 


(2) 在 right_content 容器 内 部 插入 名 为 banner 的 DIV 容器 ,切换 到 style. css 文件 
中 ,创建 相关 CSS 规则 ,如 图 11-28 所 示 。 保 存 当 前 文档 ,预览 后 的 效果 如 图 11-29 所 示 。 


#right content { 
float:left; 
width:750px; 


} 

#banner { 
width:740px; 
height:255px; 
background: url (images/banner .jpg) 

no-repeat left bottom; 
border-left:Spx #663366 solid; 
border-bottom: Spx #663366 solid; 
border-right:S5px #663366 solid; 


图 11-28 banner 容器 的 CSS 规则 


图 11-29 插入 banner 容器 后 的 预览 效果 


& 


网 页 设计 与 制作 (Dreamweaver CS6 十 HTML 5 十 CSS 3 版 ) 


(3) 在 banner 容器 后 面 插入 应 用 content_title_bar 类 的 DIV 容器 ,此 时 页 面 结 构 如 
图 11-30 所 示 。 切 换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-31 所 示 。 


-Content title bar { 
height:30px; 
background:#FFF 
url (images/content title bar bg.gif) 
Ino-repeat left center; 
padding-left:60px; 
line-height:30px; 
font-family: "黑体 "; 
font-size:16px; 
Color:#663366; 
margin:Spx 0; 


dlv 1d="content™y 
<section id="left sidebar"> 
Kaiv id... 
</section> 
<section id="right_content"> 
<div id="banner"></div> 
<div class="content_title_bar"> 最 新 美味 </div>| 
</section> 
</div> 


图 11-30 插入 应 用 content_title_bar 类 的 DIV 容器 


11-31 


content_title_bar CSS 规则 


(4) 在 应 用 content_title_bar 类 的 DIV 容器 后 面 ,插入 应 用 prod_box 类 的 DIV 容 
器 ,用 于 盛 放 商 品 简要 信息 ,具体 页 面 结构 如 图 11-32 所 示 。 


ron TG=nEIGRE contene™y 
xdiv id="banner"></div> 
<div class="content_title_bar"> 最 新 美味 </div> 
<div class="prod box"> 
<div class="product_title">ca cicle=" 清 江 特产 插 内 二 ”hzef-"#w carger-”blankw> 请 江 特产 猪肉 二 200g</ayc/divy 
<div class="product img"><img src="images/001.jpg" width="110" height="110" /></div> 
<div class="prod price"><span class="reduce">byen;15.8¢/span> <span class="price">éyen;10.8¢</span></div>| 
</div> 
</section> 


图 11-32 插入 商品 的 简要 信息 


(5) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-33 和 图 11-34 所 示 。 保 存 
当前 文档 ,预览 后 的 效果 如 图 11-35 所 示 。 


-Prod box { 
width:120px; 
height:160px; 
border:1px #D4D4D4 solid; 
float:left; 
padding:S5px 10px; 
margin-left:Spx; 
margin-top: Spx; 


-Product title a:hover { 
Color:#064E5A; 
} 

-Product img I 
text-align:center; 
margin-bottom: 8px; 

} 

.Product title { 
text-align:center; 


} 

-prod Price { 
text-align:center; 

} 

-Product title a { 
text-decoration:none; 
color: #333; 
padding:S5px 0 Spx 0; 


} 

span.reduce 1{ 
Color:#666666; 
text-decoration:line-through; 


} 


font-weight:bold; 
border:0; 


span.price { 


color: #DE1010; 


} 


图 11-33 商品 简单 信息 的 CSS 规则 (1) 


图 11-34 商品 简单 信息 的 CSS 规则 (2) 


(6) 将 图 11-35 所 示 的 代码 复制 ,然后 执行 多 次 粘贴 操作 , 即 可 制作 出 多 个 商品 超 链 
接 , 如 图 11-36 所 示 。 
(7) 参照 步骤 (3) 一 (6) 的 方法 ,制作 出 主页 剩余 商品 的 超 链 接 , 如 图 11-37 所 示 。 
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癌 垃 泽 差 会 
2 ela 


最 新 美味 


靖江 特产 猪肉 干 2009 


图 11-35 插入 商品 简要 信息 后 的 预览 效果 


网 骨架 5009 同时 网 防 起 5009 


图 11-36 插入 新 商品 后 的 预览 效果 


清江 特产 皇 内 干 2000 。。 手 斯 风干 牛 内 5009 
sa 一 SN 
45aY108 vs aa604289 


超人 气 美味 
香 衬 牛肉 条 2508 赴 南 红心 火龙 果 
mp 


¥453¥129 5 5 as 553290 


特价 美味 


越南 进口 青 栓 
2 


11-37 ”插入 剩余 商品 简要 信息 后 的 预览 效果 
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4. footer 区 域 的 制作 

(1) 将 光标 定位 在 设计 视图 中 ,使 用 footer 元 素 创建 页 面 版 权 区 域 ,并 将 该 区 域 ( 容 
器 ) 命 名 为 footer。 

(2) 根据 需要 在 footer 容器 内 插入 Logo, 以 及 版 权 文字 内 容 , 具 体 结构 如 图 11-38 所 
示 。 切 换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-39 所 示 。 


Footer id="Footer"y 
<div id="footer logo"></di 
atv 4d-mfooter_ aid" 全 天 均 本 网 上 订购 ， 支持 货 到 付款 ， 我 们 提供 的 付款 方式 有 | 
同上 银行、 银行 转账 、 支 何 宝 。<br/> 
京 TCP 证 100000 号 京 公 网 安 备 110000000000 号 <br/> 
Copyright &copy; 2015-2017 宇 泽 互联 All Rights Reserved </div> 
</footer> 


11-38 footer 区 域 的 页 面 结构 


#footer { 
height:90px; 
background:#CCC; 
clear:both; 
padding:10px; 
margin-top:20px; 

} 

#footer logo { 
float:left; 
width:240px; 
height:90px; 
background: 

url(../images/foot logo.gif) no-repeat | 

} 

#footer mid { 
float:left; 
width:730px; 
height:60px; 
padding:15px Spx; 
font:12px; 


图 11-39 footer 区 域 的 CSS 规则 


(3) 保存 当前 文档 ,根据 预览 效果 细微 调整 某 些 CSS 规则 。 
至 此 ,“ 宇 泽 美 食 "主页 的 布局 已 经 全 部 实现 完成 。 下 面 通过 模板 功能 快速 创建 网 站 
其 他 页 面 。 


11.3.2 检索 页 的 实现 


之 前 已 经 创建 了 网 站 主页 ,根据 最 初 的 网 站 规划 可 知 , 网 站 检索 页 的 布局 与 主页 有 部 
分 相似 之 处 ,这 里 拟 采 用 “模板 ”功能 快速 创建 检索 页 。 


1. 将 主页 另存 为 模板 

(1) 打开 index. html 页 面 ,执行 “文件 ”>“ 另 存 为 模板 "命令 ,打开 “ 男 存 模板 ”对 话 框 。 

(2) 在 对 话 框 中 的 “站 点 "下拉 列 表 框 中 选择 站 点 “模板 示例 ”, 在 “另存 为 文本 框 中 
输入 模板 名 称 muban。 单 击 “ 保 存 ” 按 钮 ,将 当前 页 面 index. html 保存 为 用 于 创建 其 他 页 
面 的 模板 。 
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(3) 在 模板 文档 muban. dwt 中 选择 右 侧 主体 区 域 中 名 为 right_content 的 DIV 
容器 。 
(4) 执行 菜单 栏 中 的 “插入 ”一 “模板 对 象 ?>>“ 可 编辑 区 域 ”命令 ,或 者 按 Ctrl 十 Alt 十 
V 键 ,此 时 打开 “新 建 可 编辑 区 域 " 对 话 框 。 在 该 对 话 框 的 “名 称 ” 文 本 框 中 输入 可 编辑 区 
域 的 名 称 right_content, 单 击 “ 确 定 ” 按 钮 , 即 可 建立 可 编辑 区 域 。 


2. 根据 模板 创建 list. html 文档 

(1) 执行 “文件 ”>“ 新 建 "命令 ,打开 “新 建文 档 ” 对 话 框 。 选 择 “ 模 板 中 的 页 ”选项 卡 ， 
在 “站 点 ”列表 中 选择 当前 站 点 下 的 模板 文件 muban, 单 击 * 创 建 ?按钮 , 即 可 基于 模板 创 
建 一 个 新 页 面 。 

(2) 删除 right_content 容器 内 部 所 有 内 容 , 然 后 在 其 内 部 插入 名 为 sub_banner 的 
DIV 容器 ,具体 结构 如 图 11-40 所 示 。 

(3) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-41 所 示 。 


Fsub banner 1 
width: 740px; 


height: 150px; 

background: 
url(../images/sub_banner_bg.jpg) 
no-repeat left center; 

border-left: Spx #d9cab2 solid; 


<div id="right_ content"> border-bottom: Spx #d9cab2 solid; 
<div id="sub banner"></div>| border-right: Spx #d9cab2 solid; 
</div> ) 
图 11-40 插入 sub_banner 容器 图 11-41 sub_banner CSS 规则 


(4) 参照 主页 中 制作 商品 信息 列表 的 方法 ,在 当前 二 级 页 面 中 创建 相同 结构 的 信息 
列表 ,使 之 呈现 出 如 图 11-42 所 示 的 效果 。 


11-42 二 级 页 面 的 预览 效果 
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(5) 在 商品 信息 列表 的 后 面 插入 应 用 pagination 类 的 DIV 容器 ,并 在 其 中 插入 一 组 
无 序列 表 ,页 面 结构 如 图 11-43 所 示 。 


<div class="pagination"> 
<ul> 
<li class="disablepage"> 上 一 页 </1i 
<li class="currentpage">1</1i> 
<li><a href="#">2</a></1i> 
<1i><a href="#">3</a></1i> 
<li><a href="#">4</a>...</li> 
<li><a href="#">5</a></1i> 
<li><a href="#">6</a></1i> 
<li><a href="#">7</a></1i> 
<li><a href="#">8</a></1i> 
<1li><a href="#"> 下 一 页 </a></1i> 
</ul> 
</div> 


图 11-43 插入 应 用 pagination 类 的 容器 


(6) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-44 和 图 11-45 所 示 。 


-Pagination 
height:25px; 
margin-top:10px; 


} 

.pagination ul { 
margin: 9 直 
padding: 0; 
text-align: right; 
font-size: 12px; 

} 

-pagination 1i { 
list-style-type: none; 
display: inline; 
padding-bottom: lpx; 

} 

.pagination a, .pagination a:visited 
padding: 0 Spx; 
border: lpx solid #9aafeS; 
text-decoration: none; 
Color: #2e6abl; 


图 11-44 “pagination 相关 CSS 规则 (1) 


-pagination a:hover, .pagination a:active { 
border: lpx solid #2b66a5; 
color: #000; 
background-color: #FFC; 

} 

.pagination li.disablepage { 
padding: 0 Spx; 
border: lpx solid #929292; 
Color: #929292; 

} 

-pagination li.currentpage { 
font-weight: bold; 
padding: 0 Spx; 
border: lpx solid navy; 
background-color: #2e6abl; 
Color: #FFF; 


11-45 ”pagination 相关 CSS 规则 (2) 
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(7) 保存 当前 文档 ,预览 后 的 效果 如 图 11-46 所 示 。 


上 页] 加 [21[31[41.[5][s][7][s][ 下 = 页 ] 


11-46 页 脚 预 览 效 果 


11.3.3 产品 信息 页 的 实现 


当 访问 者 选中 某 个 产品 时 ,网 站 将 自动 跳 转 到 该 产品 的 详细 信息 页 面 。 在 此 页 面 中 ， 
主要 对 产品 的 各 种 信息 加 以 描述 ,使 得 浏览 者 深入 了 解 要 购买 的 产品 。 由 于 此 页 面 与 首 
页 的 布局 有 一 定 相 似 之 处 ,这 里 同样 可 以 使 用 模板 功能 创建 该 页 面 。 

(1) 使 用 模板 创建 新 页 面 ,删除 right_content 容器 内 部 所 有 内 容 , 然 后 在 其 内 部 插入 
名 为 sub_banner 的 DIV 容器 。 

(2) 在 sub_banner 容器 后 面 插 入 应 用 content_title_bar 类 的 DIV 容器 。 在 该 容器 
后 面 插入 名 为 pro_info 的 DIV 容器 ,并 根据 需要 添加 相关 图 像 和 文字 信息 ,具体 页 面 结 
构 如 图 11-47 所 示 。 


mY Id"right content™w | 
<div id="sub banner"></div> 
<div class="content_title_bar"> 美 食 详情 </div> 
<div id="pro_info"> 
<div class="product bigimg"><img src= 
"images/product_bigimg_ 01.jpg" width="350" height="250" /></div>| 
<div class="details big box"> 
<h3> 黑 西 哥 进口 牛 油 果 6 个 约 2 斤 </h3> 
<ul> 
<1i> 商 品 编号 : 1045136542</1i> 
<1i> 宇 泽 价 : &yen;79.00</1i> 


分 </1i> 
销 商品 由 北京 京 元 丰 园 提供 ，VIP 享 受 96 折 </1i> 
<1i> 同 城 服务 : 同城 24 小 时 物流 送 货 上 门 </11> 
<1i> 库 存 情况 : 现货 </1i> 
<1i> 运 更 说 明 : 北京 、 上 海 、 深 圳 三 合 发 货 ， 确保 新 鲜 </11> 
<11i> 购 买 数量 : 2</1i> 
</ul> 
<a href="#"” class="prod_buy"> 加 入 购物 车 </a> <a href="#" 
class="prod_buy"> 收 藏 该 商品 </a> </div> 
</div> 
</div> 


图 11-47 插入 应 用 content_title_bar 类 的 DIV 容器 


(3) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-48 和 图 11-49 所 示 。 

(4) 保存 当前 文档 ,预览 后 的 效果 如 图 11-50 所 示 。 

(5) 在 pro_info 容器 后 面 ,插入 名 为 pro_jieshao 的 DIV 容器 ,并 在 其 中 输入 商品 的 
详细 信息 ,具体 结构 如 图 11-51 所 示 。 切 换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 
图 11-52 所 示 。 保 存 当 前 文档 ,通过 浏览 器 即 可 看 到 最 终 效 果 。 

此 ,“ 宇 泽 美 食 ” 主 要 类 型 网 页 已 经 全 部 制作 完成 ,读者 可 以 根据 自己 的 喜好 修改 相 
关 的 CSS 规则 ,进一步 美化 整个 页 面 。 


#pro info { 
height:280px; 
padding:S5px 20px; 

} 

-Product bigimg { 
width:350px; 
height:250px; 
float:left; 

} 

-prod buy I 
width:75px; 
height:24px; 
display:block; 
float:left; 
background: 

url(../images/link bg.gif 

no-repeat center; 
margin:2px 0 0 Spx; 
text-align:center; 
line-height:24px; 
text-decoration:none; 
Color: #006600; 

} 
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-detalls big box { 
width:340px; 
float:left; 
margin-left:20px; 
text-align:left; 

} 

.details big box h3 { 
Color:#663366; 
text-align:center; 
font-size:16px; 
font-weight:bold; 

} 

-details big box ul { 
padding:S5px 1l0px Spx 10px; 

} 

.details big box 1i { 


height:25px; 
} 


图 11-48 产品 信息 内 容 相 关 的 CSS 规则 (1) 


border-bottom: 1px #CCC dashed; 


图 11-49 产品 信息 内 容 相 关 的 CSS 规则 (2) 


图 11-50 


Zaiv 1d="pro iesaony 
<h3> 产 品 详细 介绍 </h3> 
<div class="jieshao"> 

<p> 匿 柠 和 丰 洒 :</p> 
<br> 
</div> 
<h3> 注 意 事项 </h3> 


</div> 


11-51 输入 商品 的 介绍 内 容 


墨西哥 进口 牛 油 果 6 个 约 2 斤 
商品 编号 : 1045136542 
字 泽 价 : Y79.00 


商品 评分 : 5 分 

促请 消息 : 此 商品 由 北京 京 地 丰 园 提供 ，VIP 享 受 96 折 
同城 服务 - 同城 24 小 时 柳 流 送 货 上 门 

库存 情况 : 现货 

运费 说 明 : 北京 、 上 海 、 深 圳 三 仓 发 货 ， 确 保 新 群 
购买 数量: 2 


加 入 购物 车 。 收藏 该 商品 


产品 信息 预览 效果 


#pro jieshao { 
height:300px; 
margin-top:10px; 
background:#e7e3de;| 
padding:20px; 

} 

#pro_ jieshao h3 { 
Color:#663366; 
font-size:16px; 

} 

-jieshao { 
background: #FFF; 
padding:Spx; 

} 


11-52 商品 介绍 内 容 相关 的 CSS 规则 
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、N 
11.4 习题 


1. 使 用 DIV 十 CSS 的 方式 制作 如 图 11-53 所 示 的 页 面 。 


图 11-53 操作 题 1 图 


2. 策划 一 个 电子 商务 网 站 ,并 撰写 网 站 策划 ,要 求 使 用 DIV 十 CSS 的 方式 制作 出 网 
站 的 一 些 子 页 面 ,如 图 11-54 一 图 11-56 所 示 。 


aa re 


图 11-54 网 站 主页 面 
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¥ Promotions 他 Categores 


Mp Productname 


¥ Promotions = 要 Categories 


pace 
cotons 届 大 国 


a a ke 


图 11-56 产品 详细 信息 页 面 


实 训 指导 


【本 章 导读 】 

本 章 拟 采 用 独立 完成 整个 实 训 的 形式 ,锻炼 读者 独立 思考 、 开 发 和 解决 困难 的 能 力 。 
并 使 其 通过 综合 实 训 的 锻炼 ,能 够 快速 找到 自身 不 足 ,为 进一步 独立 找 准 方向 。 

【学 习 目 标 】 

名 掌握 网 站 前 台 开 发 的 基本 流程 ; 

名 提高 团队 协同 工作 的 基本 素养 。 


12.1 实 训 的 意义 和 目的 


1. 意义 

根据 教学 计划 的 要 求 ,在 教师 的 统筹 指导 下 对 学 生 进 行 网 页 制作 专项 技能 的 训练 , 培 
养 学 生 综合 运用 理论 知识 分 析 和 解决 实际 问题 的 能 力 , 实 现 由 理论 知识 向 操作 技能 和 经 
验 的 增强 转化 。 因 此 ,有 成 效 的 实 训 教学 ,对 实现 本 专业 的 培养 目标 ,提高 学 生 的 综合 素 
有 着 重要 的 作用 。 

2. 目的 

通过 综合 实 训 进一步 巩固 、 深 化 和 扩展 学 生 的 理论 知识 与 专业 技能 ,具体 包括 以 下 几 
个 方面 。 

(1) 熟练 掌握 网 页 布局 规划 、 分 析 的 方法 。 

(2) 熟练 掌握 HTML 5 的 基本 语法 和 新 增 元 素 知识 ,并 且 能 够 熟练 使 用 网 页 制作 软 
件 Dreamweaver CS6 的 使 用 方法 。 

(3) 熟练 掌握 在 网 页 中 插 和 文字、 图像 .表单 和 表格 等 多 种 元 素 的 方法 。 

(4) 熟练 掌握 CSS 样式 的 基本 使 用 方法 ,以 及 CSS 3 中 新 增 属性 的 使 用 方法 ,达到 灵 
活 运用 CSS 美化 页 面 元 素 的 能 力 。 

(5) 掌握 网 站 测试 的 方法 。 

(6) 培养 学 生 获取 信息 和 处 理 信息 的 能 力 ,例如 通过 网 络 .书籍 等 方式 搜集 前 沿 技术 
和 特效 代码 等 。 

(7) 培养 学 生理 论 联系 实际 的 工作 作风 、 严 肃 认真 的 科学 态度 以 及 独立 工作 的 能 力 ， 
树立 自信 心 。 
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(8) 培养 团队 协作 精神 和 共同 开发 网 站 的 综合 能 力 。 


12.2 ” 实 训 要 求 与 步 又 


1. 总 体 要 求 

(1) 制作 网 页 前 ,必须 做 好 网 站 的 需求 分 析 , 策 划 好 网 站 的 主题 ,规划 好 网 站 的 风格 
和 结构 ,创建 完善 的 目录 结构 。 

(2) 在 确定 网 站 主题 的 情况 下 ,搜集 所 需 的 文字 资料 、 图 像 资料 。 

(3) 制作 的 网 站 建议 包括 3 个 页 面 ,第 一 个 为 首页 ,第 二 个 为 二 级 子 页 ,第 三 个 为 内 
容 页 。 其 中 ,首页 必须 包含 导航 栏 , 二 级 子 页 与 内 容 页 之 间 必须 通过 模板 进行 制作 。 若 网 
站 制作 较为 复杂 ,可 以 仅 制作 首页 。 

(4) 所 有 页 面 根据 规划 合理 插入 图 像 、Flash 动画 和 视频 等 元 素 ,使 得 内 容 充 实 、 布 局 
合理 ,颜色 搭配 协调 、 美 观 大 方 。 

(5) 页 面 尺 十 符合 当前 设计 潮流 和 规范 ,站 点 中 文件 或 文件 夹 的 命名 应 当 规范 ,达到 
见 名 知 意 、 容 易 理 解 的 程度 。 

(6) 小 组 成 员 之 间 , 既 要 分 工 明确 ,又 要 密切 合作 ,培养 良好 的 互助 .协作 精神 。 

(7) 独立 完成 规定 的 实 训 内 容 ,不 得 弄虚作假 ,不 准 抄袭 或 复制 他 人 的 网 页 或 内 容 。 


2. 实 训 步 又 

(1) 分 组 : 建议 独立 完成 整个 实 训 全 部 内 容 , 若 自身 实力 较 弱 ,可 以 2~3 人 为 一 组 ， 
每 一 组 选 定 一 名 组 长 ,主要 负责 本 组 所 有 事务 。 

(2) 选 题 : 组 内 成 员 相互 讨论 ,确定 适合 的 网 站 主题 ,例如 

忌 班 级 活动 专题 网 。 

所 教学 资源 共享 网 站 。 

避 新 闻 类 综合 网 站 。 

名 公司 类 网 站 。 

所 响应 式 布局 类 网 站 。 

芯 团 购 类 网 站 。 

世博 客 类 网 站 。 

(3) 分 工 : 若 本 组 中 包含 多 人 , 则 由 教师 根据 每 组 成 员 之 前 的 学 习 情 况 ,合理 分 配 具 
体 的 任务 ,但 每 个 成 员 必 须 完 成 一 个 页 面 的 制作 。 

(4) 根据 不 同 分 工 ,成 员 分 头 行动 搜集 所 需 素 材 、 制 作 页 面 。 

(5) 页 面 整 合 与 测试 。 

(6) 撰写 实 训 报告 书 。 


12.3 考核 标准 


根据 实 训 期 间 的 纪律 考核 情况 、 对 待 实 训 的 态度 ,站 点 的 目录 结构 ,各 个 页 面 的 布局 
结构 .颜色 搭 配 ,文字 、 图 像 .动画 的 合理 搭配 ,网 页 之 间 的 链接 是 否 顺 畅 ,网 页 制作 技术 的 
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应 用 ,网 站 的 整体 浏览 效果 等 方面 进行 综合 评分 。 评 分 参考 标准 如 表 12-1 所 示 。 


表 12-1 考核 标准 


序号 


考核 细则 


分 值 比例 


网 站 效果 


网 站 内 容 : 主题 鲜明 ,内容 健康 ,图 像 动画 等 元 素 能 够 正确 反映 网 站 
主题 


版 面 布局 : 布局 合理 ,色彩 搭配 协调 、 美 观 


CSS 样式 : 书写 命名 规范 ,应 用 合理 无 元 余 


技术 含量 : 根据 网 站 主题 ,合理 选择 相关 技术 


70% 


实 训 纪律 


实 训 期 间 组 织 纪律 性 强 , 无 迟到 ,早退 、 缺 课 现象 


成 员 协作 


小 组 成 员 间 分 工 明确 ,所 有 的 成 员 在 规定 时 间 内 完成 实 训 任务 ,无 雷同 
或 抄袭 现象 


实 训 报 告 


书写 规范 ,内容 翔实 ,有 实际 收获 


5% 


合计 


100% 


~、 
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